0

我有一个表单 (#waldform)，我只想在提交前一个表单 (#modelform) 后才显示该表单。#modelform 和 #waldform 都调用 python 函数。如果我将#waldform 直接包含到 html 文件中，则一切正常并调用 python 函数。但是，如果我只在提交#modelform 之后使用jquery 让它出现，就像在我下面的代码中一样，python 函数不会被调用，并且站点URL 在最后更改为#。

这是jquery。在第一个函数中添加了表单元素。

$(document).ready(function() {


    //call estimate python function
    $(function() {

        $("#modelform").submit(function() {

            // post the form values via AJAX...
            $.post('/estimate', {name: $("#mymodel").val()}, function(data) {

                var $a_var = data['title']
                var $element = $('<div class="item">' + $a_var + '</div><br>');

                $('body').append($element) ;

                //FORM ADDED HERE
                $('body').append('<form id="waldform" action="#" method="post"><input type="text" id="waldnum" /><input type="submit" value="Wald Test" /></form>');


            });

        return false ;
        });
    });



    //call wald python function
    $(function() {

        $("#waldform").submit(function() {

            //post the form values via AJAX...
            $.post('/wald', {name: $("#waldnum").val()}, function(data) {

                var $a_var = data['title']
                var $element = $('<div class="item">' + $a_var + '</div><br>');

                $('body').append($element) ;

            });

        return false ;
        });
    });



});

如果需要，这里是 html。如果我将#waldform 直接包含在此html 代码中，则正确调用了python 函数。

<!DOCTYPE html>
    <html>
        <head> 

                <script type="text/javascript" src="static/jquery-1.4.2.js"></script>
                <script type="text/javascript" src="static/jquery-ui-1.8.4.custom.min.js"></script>
                <script type='text/javascript' src='static/js_test.js'></script>
                <script type='text/javascript' src='static/jquery.form.js'></script> 

                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
                <script src="http://malsup.github.com/jquery.form.js"></script>
        </head>
        <body>

            <form id="dataform" action="submit" method="post" enctype="multipart/form-data">
                <input type="file" name="myfile" id="myFile"/>
                <input type="submit" value="Submit File"/>
            </form>

            <form id="modelform" action="#" method="post">
                <input type="text" id="mymodel" />
                <input type="submit" value="Estimate" />
            </form>

        </body>
    </html>
4

2 回答 2

1

在第二个表单存在之前，您将绑定到第二个表单的提交事件。添加后将其移至。

//FORM ADDED HERE
$('body').append('<form id="waldform" action="#" method="post"><input type="text" id="waldnum" /><input type="submit" value="Wald Test" /></form>');

//BIND EVENT HERE
$("#waldform").submit(function() {
于 2013-10-24T19:16:08.133 回答
0

您需要使用 .on() 委托它

$(document).on('submit', '#waldform', function(e) {
    alert('clicked');
    e.preventDefault();
});
于 2013-10-24T19:30:06.310 回答