Fancybox表单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>

和按钮打开fancybox：

<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()是叫树时代等

谢谢

Answer 1

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

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

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

由于表单似乎不是动态创建的，因此您只需在页面加载时绑定单个事件处理程序：

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

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

如果你绝对要保持事件处理函数内绑定，那么你可以用.off()或.unbind()如果您使用的是之前的版本1.7）功能绑定之前删除任何现有的事件处理程序新的一个：

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

Answer 2

你试过.one()处理程序了吗？

$('#myform').one('submit', function() {//This will make it submitted once
    //....calling an ajax
    return false;
});

Answer 3

你可以做点什么

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

Answer 4

您可以尝试以下方法

$("#myform").each(function(i) {
    var handler = i.on("submit", function() {
        handler.stop();
        // do stuff
    });
    // other stuff
});