用戶定義的回調函數在Javascript/jQuery中被多次觸發

Question

有一些類似的問題，但它們都是關於原生jQuery回調函數的。

所以我有這個代碼（生活）創建一個div包含一些表單元素。 這些元素的值應該在刪除div（之前）時在回調函數中檢索。

function popup(callback) { 
    // ... 
    // before removing the div 
    callback.call(); 

    // remove div 
} 

出乎意料的是，回調函數在第一次執行彈出窗口後被激發多次（越來越多）。

我簡化了代碼，這裏是fiddle。

Answer 1

我希望這是你所需要的。

function popup(callback) { 
    $("body").append('<div><span id="test">test</span> <a href="#" id="close">close</a></div>'); 
    $(document).on("click", "#close", function() { 
     callback.call(); 

     // 
     //callback = function() {}; 
     $(document).off("click", "#close"); 
     $("div").remove(); 

    }); 
}; 

$(document).on("click", "#open", function() { 
    popup(function() { 
     alert('$("#test").length = ' + $("#test").length); 
    }); 
}); 

基本上，你需要通過調用關閉（）方法來刪除事件處理程序。

Answer 2

嘗試動態生成元素而不是使用字符串。這將使您可以更輕鬆地綁定事件。

function popup(callback) 
{ var $elem = $("<div></div>"); 
    $elem.append($("<span></span>").html("test")); 
    $elem.append(" "); 
    $elem.append($("<a></a>").html("close").attr("href", "#")); 

    $("body").append($elem); 
    $elem.find("a").click(function() { 
     callback.call(); 
     $elem.remove(); 
    }); 
}; 

$(document).on("click", "#open", function() { 
    popup(function() { 
     alert('$("#test").length = ' + $("#test").length); 
    }); 
}); 

例子：http://jsfiddle.net/4se7M/2/

Answer 3

我不知道確切的情況，但爲什麼每次顯示彈出窗口時都要綁定和解除綁定事件？

你只能綁定一次，像這樣，不是嗎？

$(document).on("click", "#close", function() { 
    alert('$("#test").length = ' + $("#test").length); 
    $("div").remove(); 
}); 

function popup() { 
    $("body").append('<div><span id="test">test</span> <a href="#" id="close">close</a></div>'); 
}; 

$(document).on("click", "#open", function() { 
    popup(); 
});