2

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

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

4

4 回答 4

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

于 2012-05-14T21:21:09.180 回答
1

每次将元素插入 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-14T21:24:05.987 回答
0

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

于 2012-05-14T21:21:41.730 回答
0

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

于 2012-05-14T21:22:04.013 回答