javascript - Fancybox form ajax提交，只有一个ajax请求

Question

我有一个关于 ajax 提交的问题。

我有一个html表单

<div style="display:none">
    <form id="myform" method="post" action="">
        <input type="text" id="name" />
        <input type="submit" id="sbmt" />
    </form>
</div>

还有打开花式框的按钮:

<a id="sbtfancybox" href="#myform">
    <input type="button" value="Add new" 
           onClick="defineFancybox();" />
</a>

然后我用 jquery 定义了一个 fancybox:

<script type="text/javascript">
    function defineFancybox() {
        $('#sbtfancybox').fancybox({
            //...some json parameters
        });

        $('#myform').submit(function() {//the main problem is here
             //....calling an ajax
             return false;
        });
    }
</script>

我的问题是如何做 $('#myform').submit(..) 提交总是被调用一次，而不是如果我第一次打开 fancybox，$('#myform').submit() 被调用一次，如果我第二次打开 fancybox，$('#myform').submit() 是调用两次，如果我第三次打开 fancybox，则 $('#myform').submit() 被调用 tree times 等。

谢谢

Answer 1

jQuery 事件处理程序不会相互覆盖，即使在您再次绑定(bind)同一函数的情况下也是如此。每次调用此代码时:

$('#myform').submit(function() {//the main problem is here
    //....calling an ajax
    return false;
});

添加了另一个事件处理程序。由于该代码位于单击按钮时调用的函数中，因此第一次单击会产生一个事件处理程序。第二次点击添加另一个，所以你现在有两个。第三次点击添加另一个，所以你有三个...

由于表单似乎不是动态创建的，您可以在页面加载时绑定(bind)单个事件处理程序:

$(document).ready(function() {
    $('#myform').submit(function() {
        //....calling an ajax
        return false;
    });
});

然后将其移出 defineFancybox() 函数。

如果您绝对必须将事件处理程序绑定(bind)在该函数内，那么您可以使用.off() (或 .unbind() 如果您使用的是 1.7 之前的版本)函数在绑定(bind)新事件处理程序之前删除任何现有的事件处理程序:

$('#myform').off('submit').submit(function() {
    //....calling an ajax
    return false;
});