调用javascript函数太多次

我刚刚进入Javascript和我遇到同样的问题，不同的代码块的次数：我有一个创建一个类型元件的功能，并且做了功能这种元素的东西。在我看来很明显，我需要在元素创建后调用“做某事”功能，但是当我这样做时，它最终会运行多次，而不是我想要的。调用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个警报;第四：一个警报。

谁能向我解释为什么发生这种情况，以及如何解决它，这样我每次只一个元素上我右键单击得到一个警报？

来源

2012-05-14 ben

绑定是将事件与DOM元素关联的行为。 .mousedown和类似事件仅绑定在已存在的元素上。
每次通话时间rightClick()你一个新的事件绑定到当前所有.element元素。
您可以尽可能多地将函数绑定到相同的元素，这就是为什么您会看到被多次调用的函数。

对于动态内容应签.on或.delegate其工作像这样的：jQuery.fn.delegate

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

jQuery.fn.on

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

例

例子只有一次打电话这一点，你应该是非常好的。如果你不使用jQuery 1.7或更高版本，你会想要使用 .delegate()而不是 .on。

来源

2012-05-14 21:21:09

感谢您的详细响应;你写的东西很有意义，我将检查.on（）和.delegate（）的文档。但是，它仍然不起作用。任何其他想法？ – ben

刚刚工作。再次感谢。 – ben

很高兴它的工作。祝你在JS的旅程中幸运！ –

我相信你所添加的相同的处理多次，这意味着当你点击一个按钮，您要重新结合的动作相同的功能。

来源

2012-05-14 21:21:41 ubik

您已将事件处理函数绑定到类“.element”。这意味着在页面上有'.element'类的每个元素都会在发生右键单击时触发该事件。

来源

2012-05-14 21:22:04

你不需要绑定事件每次插入和元素到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>"); 
});

来源

2012-05-14 21:24:05

调用javascript函数太多次

回答

相关问题