1

我有一个关于 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()称为树次等。

谢谢

4

4 回答 4

2

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;
});
于 2013-01-04T10:12:52.720 回答
1

您是否尝试过.one()处理程序：

$('#myform').one('submit', function() {//This will make it submitted once
    //....calling an ajax
    return false;
});
于 2013-01-04T10:13:37.493 回答
0

你可以做类似的事情

    $('#myform').unbind('submit');
    $('#myform').bind('submit',function() {//the main problem is here
         //....calling an ajax
         return false;
    });
于 2013-01-04T10:30:29.667 回答
0

您可以尝试以下方法

$("#myform").each(function(i) {
    var handler = i.on("submit", function() {
        handler.stop();
        // do stuff
    });
    // other stuff
});
于 2013-01-04T19:19:56.127 回答