提交按钮上的Click事件仅触发一次

Question

加载后，我会订阅页面上所有提交按钮上的click事件。 单击所有按钮都会触发正确的事件，但这仅起作用一次。 如果您连续单击两个按钮，则第二个按钮将正常提交表单，而不是运行脚本。 我究竟做错了什么？。

注意：我使用.load()从“ myurl”加载表单数据，然后在complete事件中挂接到提交按钮的click事件。

$(document).ready(function()
{
    //Load user content
    $("#passcontent").load("myurl", function()
    {
        //subscribe to click events for buttons to post the data back
        $('input[type=submit]').click(function()
        {
            return submitClick($(this));
        });
    });
});

function submitClick(submitButton)
{
    submitButton.attr("disabled", true);

    alert(submitButton.closest("form").serialize());
    $.post("myurl",
            submitButton.closest("form").serialize(),
            function(data)
            {
                alert("woop");
                $("#passcontent").html(data);
            });

    //Prevent normal form submission process from continuing
    return false;
}

Answer 1

我会像这样重新排列您的点击处理程序：

$(function() {
  $("#passcontent").load("myurl");

  $('input[type=submit]').live('click', function() {
    $(this).attr("disabled", true);        
    $.post("myurl", $(this).closest("form").serialize(), function(data) {
       $("#passcontent").html(data);
    });
    return false;
  });
});

使用.live('click', func)监听当前和新元素的click事件，因为它们以相同的方式使DOM冒泡。 通过执行上述操作，您将在DOM的根部附加一个处理程序，以侦听任何input[type=submit]来冒起一个click ，即使重新加载内容并替换了Submit按钮，它也可以工作。