如何在jQuery中使用循环自动绑定多个事件处理程序答案

【问题标题】：How to automatically bind multiple event handlers with a loop in jQuery如何在jQuery中使用循环自动绑定多个事件处理程序
【发布时间】：2014-12-26 09:07:40
【问题描述】：

我正在开发一个模拟棋盘的简单应用程序。因此我有一张有 64 个方格的桌子。我想通过编写一个通过循环而不是写出 64 次的函数来为每个方格绑定事件处理程序。编辑：请注意，我希望处理程序返回一个数值以指示单击了哪个 div。我不需要处理程序来返回 div 的内容。这是给定两个可点击 div 的简化版本：

<div id="div0">A box</div>
<div id="div1">Another box</div>
<div id="say"></div>

和javascript代码：

$("#say").append("Which div are you going to click? ");

function clicky() {
    var i = 0;
    while (i < 2) {
        $("#div" + i).on("click", function () {
            $("#say").append("div" + i);
        });
        i++;
    }

}

clicky();

这里是jsfiddle。

该函数几乎可以工作，也就是说，它绑定到两个 div，但它绑定了相同的（错误的）处理程序到它们。不知道如何解决这个问题。

【问题讨论】：

jsfiddle.net/q53y3L4q/6
为了您的信息，您在这里面临关闭

标签： javascript jquery

【解决方案1】：

使用通用类。然后就可以使用Class Selector (“.class”)绑定事件了

HTML

<div class='myDiv' id="div0">div0</div>
<div class='myDiv' id="div1">div1</div>
<div id="say"></div>

脚本

$("#say").append("Which div are you going to click? ");
$(".myDiv").on("click", function () {
    $("#say").append(this.id);
});

DEMO

【讨论】：

我错过了什么吗？
不知道为什么投反对票。我喜欢使用 this.id。对于我，这说得通。谢谢！

【解决方案2】：

试试这个：-

$("#say").append("Which div are you going to click? ");
function clicky()
{
var i = 0;
for(i;i<=2;i++)
{
    $('#div'+i).on('click',function(){
    $("#say").append($(this).html());
    });
 }

}

clicky();

Demo

【讨论】：

使用类比循环更有意义

【解决方案3】：

将事件附加到 64 个方格不是正确的方法。您应该在这里使用事件冒泡。将事件附加到 64 个方格的容器。那么如果事件被捕获，就可以找出事件目标。

从资源中了解事件冒泡： http://javascript.info/tutorial/bubbling-and-capturing

【讨论】：