调用javascript函数太多次答案

【问题标题】：calling javascript function too many times调用javascript函数太多次
【发布时间】：2012-05-14 21:19:15
【问题描述】：

我刚开始接触 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 个警报；第四种：一个警报。

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

【问题讨论】：

标签： javascript jquery function call

【解决方案1】：

绑定是将事件与 DOM 元素相关联的行为。 .mousedown 和类似事件仅绑定在已存在的元素上。
每次调用 rightClick() 时，都会将一个新事件绑定到所有当前的 .element 元素。
您可以根据需要将函数绑定到同一个元素，这就是为什么您会看到函数被多次调用的原因。
对于动态元素，请查看 .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。

【讨论】：

感谢详细回复；您所写的内容很有意义，我将查看有关 .on() 和 .delegate() 的文档。但是，它仍然不起作用。还有其他想法吗？

【解决方案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>");
});

【讨论】：

【解决方案3】：

我相信您多次添加相同的处理程序，这意味着当您单击按钮时，您会将操作重新绑定到相同的功能。

【讨论】：

【解决方案4】：

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

【讨论】：