jquery:在网站上提交几个相同表格之一

时间:2013-10-25 22:31:32

标签: jquery html forms

我在我的网站上有几个相同的表单并提交其中一个会导致一些奇怪的问题。这是我的设置:

我的网站上有一个带有id" #modeform"的表单。提交#modelform时,将出现第二个表单,其类标识符为" .waldform"。 #modelform可以多次提交,允许在我的网站上存在几个相同的.waldforms。提交.waldform会调用python函数并将返回的值附加到网站的主体。

问题如下:说我已经提交了两次#modelform,并且我的网站上有2个.waldforms。提交已创建的第一个.waldform会将其返回值附加到我的站点主体两次。提交第二个.waldform只会将其返回值附加到正文一次。类似地,如果有3个.waldforms,则第一个.waldform将其值追加3次,第二个.waldform将其值追加两次,第三个将仅追加一次。

我希望每个.waldform仅将其值附加一次,无论网站上存在多少。

有什么想法吗?

这是我的jquery:

var $counter = 0

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

    $counter++;

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

    //MODEL FORM
    $.post('/estimate', {name: $("#mymodel").val()}, function(data) {

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

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




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

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

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

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

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



            });

            return false ;
        });



    });

    return false ;
});

1 个答案:

答案 0 :(得分:2)

在提交modelform时调用的函数中,附加一个waldform类的形式,然后将提交处理程序附加到ENTIRE类。所以,你提交模型,制作一个waldform并提交给第一个waldform。然后你提交模型,制作第二个waldform,并将提交事件附加到整个类,所以你首先wald现在有2,第二个有1,依此类推。因此,在附加新的waldform之后,在附加提交事件之前,删除所有先前的提交处理程序

$('.waldform').off();

应该解决你的问题。

您可能希望查看unbind()和off()上的文档。

另一种方法是创建一个新的dom元素,将提交绑定到它,然后将其附加到body,而不是绑定到整个类。