Question

我刚刚进入Javascript并且我使用不同的代码片段多次遇到同样的问题：我有一个函数创建了一种元素和一个函数，它对这种类型的元素做了一些事情。对我来说，似乎很明显我需要在元素创建后调用“do something”函数，但是当我这样做时，它最终运行的次数比我想要的多。

以下是我的问题的一个例子：

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

绑定是将事件与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。

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”类的每个元素都会在右键单击时触发该事件。

多次调用javascript函数

4 个答案: