jquery：通过ajax加载相同的表单时重复提交事件

Question

我有一个全局表单，我希望每次提交时都使用相同的表单，并且此表单是自动生成的，具体取决于从数据库生成的线程数。所以我可能会在页面加载时出现两个或四个相同类型的表单。此外，这种类型的表单将通过 ajax 在某些请求上加载到页面上。最重要的是 - 所有这些表单都将使用相同的提交功能。

例如，

html

<div class="form"></div>
<a href="form.php" class="load">load</a>

<div>
<form action="#" method="post" enctype="multipart/form-data" class="form-global">
    <textarea name="str_content" title="Write a comment..."></textarea>
    <input type="submit" name="submit" value="SUBMIT" class="button-public left"/>
</form>
</div>

<div>
<form action="#" method="post" enctype="multipart/form-data" class="form-global">
    <textarea name="str_content" title="Write a comment..."></textarea>
    <input type="submit" name="submit" value="SUBMIT" class="button-public left"/>
</form>
</div>

下面是jquery中的工作代码，

$(document).ready(function() {

    sumbitform();

    $(".load").click(function () {
        var path = $(this).attr('href');

        $('.form').load( path, {}, function(){

            sumbitform();

            //$(this).bind("submit", sumbitform);
        });

        return false;
    });


});

this.sumbitform = function(){

    $("form.form-global").submit(function(){
        alert('1');
        return false;
    });
}

页面加载时所有表单都正常工作，每个表单只提交一次。但是每当通过ajax加载同类型的新表单时就会出现问题，其他现有表单会触发两次。

您可以在此链接上看到问题， http://nano-visions.net/dump/jquery.ajaxsubmit/

我该如何解决这个问题？我可以像下面这行一样将提交功能附加到 ajax 加载的表单吗？

$(this).bind("submit", sumbitform); // doesn't work obviously

还是有其他更好的想法？

谢谢。

Answer 1

您需要改用$(this).live("submit", sumbitform);。这会将相同的事件绑定到稍后出现的元素，而不仅仅是现在出现的元素。

欲了解更多信息，请查看live in the jQuery docs。