調用javascript函數太多次

Question

我剛接觸Javascript，並且用不同的代碼段多次遇到相同的問題：我有一個創建元素類型的函數和一個對該元素類型做某事的函數。 對我來說似乎很明顯，在元素創建之后，我需要調用“執行某事”功能，但是當我這樣做時，它最終運行的次數超過了我想要的次數。

這是我的問題的一個例子：

function rightClick(){
    $(".element").mousedown(function(e){
        switch (e.which){case 3: alert( $(this).attr("id") )};
    });
};

function doubleClick(){
    var counter = 0;
    $(document).dblclick(function(e){
        counter++;
        elementId = "element" + counter;
        $("#new_elements").append("<div class='element'"          +
                                   "id='"    + elementId + "'"   +
                                   "style='position:absolute;"   +
                                   "top:"    + e.pageY + ";"     +
                                   "left:"   + e.pageX + ";'>"   +
                                    elementId+ "</div>");
    rightClick();
});

在此示例中，如果我創建4個元素，然后右鍵單擊創建的第一個元素，最終將得到4個警報框而不是一個。 如果我右鍵單擊創建的第二個元素，則會收到三個警報； 第三：2個警報； 第四：一個警報。

誰能向我解釋為什么會發生這種情況，以及如何解決它，以便每次我右鍵單擊某個元素時只收到一個警報？

Answer 1

1. 綁定是將事件與DOM元素相關聯的動作。 .mousedown和類似事件僅綁定到已經存在的元素上。
2. 每次調用rightClick()都會將一個新事件綁定到所有當前的.element元素。
3. 您可以根據需要將函數綁定到同一元素，這就是為什么您看到該函數被多次調用的原因。
4. 對於動態元素，應檢出.on或.delegate ，其工作方式如下：

jQuery.fn.on的示例

  $(document.body).on("mousedown", ".element", function(e) { if (e.which === 3) alert($(this).attr("id")); }); 

jQuery.fn.delegate的示例

  $(document.body).delegate(".element", "mousedown", function(e) { if (e.which === 3) alert($(this).attr("id")); }); 

只需調用一次，您就可以了。 如果您未使用jQuery 1.7或更高版本，則需要使用.delegate()而不是.on 。

Answer 2

您無需在每次將元素插入DOM時都綁定事件。 您可以使用.on為動態插入的元素附加事件處理程序。

$(document).on('mousedown','.element', (function(e){
    switch (e.which){
            case 3: alert( $(this).attr("id") ); 
            break; 
    };
});

var counter = 0;
$(document).dblclick(function(e){
    counter++;
    elementId = "element" + counter;
    $("#new_elements").append("<div class='element'"          +
                               "id='"    + elementId + "'"   +
                               "style='position:absolute;"   +
                               "top:"    + e.pageY + ";"     +
                               "left:"   + e.pageX + ";'>"   +
                                elementId+ "</div>");
});

Answer 3

我相信您會多次添加相同的處理程序，這意味着單擊按鈕時，會將操作重新綁定到相同的功能。

Answer 4

您已將事件處理程序綁定到類“ .element”。 這意味着，右鍵單擊時，頁面上所有帶有類“ .element”的元素都會觸發該事件。