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