javascript - 如何在 jQuery 中使用循环自动绑定(bind)多个事件处理程序

Question

我正在开发一个模拟棋盘的简单应用程序。因此我有一张有 64 个方格的 table 。我想通过编写一个循环的函数来绑定(bind)每个方 block 的事件处理程序，而不是写出 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 。

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

Answer 1

使用公共(public)类。然后你可以使用Class Selector (“.class”)绑定(bind)事件

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