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
});

Fancybox表单ajax提交，只有一个ajax请求

4 个答案: