多次调用javascript函数

我刚刚接触到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();
});

函数右键单击（）{
$（“.element”）.mousedown（函数（e）{
开关（e.which）{case 3:alert（$（this.attr（“id”））}；
});
};
函数双击（）{
var计数器=0；
$（文档）.dblclick（函数（e）{
计数器++；
elementId=“element”+计数器；
$（“#新的#u元素”）。追加（“”+
elementId+“”）；
右键单击（）；
});

在本例中，如果我创建了4个元素，并右键单击我创建的第一个元素，我将得到4个警报框，而不是一个。如果我右键单击我创建的第二个元素，我将得到三个警报；第三个：2个警报；第四个：1个警报

有人能向我解释为什么会发生这种情况，以及如何修复它，使我每次右键单击一个元素时只收到一个警报吗

绑定是将事件与DOM元素关联的行为。

.mousedown

和类似事件仅绑定已存在的元素

每次调用

rightClick（）

时，都会将一个新事件绑定到所有当前

.element

元素

您可以根据需要将函数绑定到同一个元素，这就是为什么您会看到函数被多次调用的原因

对于动态元素，应在或上签出

。委托

，其工作方式如下：

举例 举例

---

只调用一次就可以了。如果您不使用jQuery 1.7或更高版本，您将希望使用

.delegate（）

而不是

。

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

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

您不需要每次将事件和元素插入DOM时都绑定该事件。您可以使用为动态插入的元素附加事件处理程序

$(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>");
});

$（document）.on（'mousedown'，'.element'，（函数（e）{
开关（e.which）{
案例3：警报（$（this.attr（“id”））；
打破
};
});
var计数器=0；
$（文档）.dblclick（函数（e）{
计数器++；
elementId=“element”+计数器；
$（“#新的#u元素”）。追加（“”+
elementId+“”）；
});

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

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

$(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>");
});