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