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> 

而且我定义的fancybox使用jQuery：

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