Question

我是一张静态创建的表格：

<table id="table" style="width:100%">
    <tbody id="tbody">
    </tbody>
</table>

我已经创造了一些元素：

var tbody = document.getElementById('tbody');   

for (var i = 0; i < 8; i++) {
    var tr = document.createElement('tr');
    for (var j = 0; j < 8; j++) {
        var td = document.createElement('td');
        td.appendChild( createDiv(i,j)); // div id is = i + ' ' + j
        tr.appendChild(td);
    }
    tbody.appendChild(tr);
}

但是现在我试图为每个div添加一个回调函数，但这不起作用。我认为问题在于jquery on function，但我不知道如何解决它。

for(var x=0;x<8;x++){
    for(var y=0;y<8;y++){
        $(document.body).on('mousedown', '#' + x + ' ' + y, function(){
            var audio = document.getElementById('audio');

            audio.currentTime = 0;
            audio.play(); 
        });
    }
}

当我尝试对静态元素做同样的事情时它工作正常，有人知道发生了什么吗？感谢

Answer 1

$(document.body).on('mousedown', '#tbody td', function(e){
    //TODO::add code here
});

无需将事件绑定到每个td dom。

Answer 2

这里有其他答案在答案中是正确的，但我想补充一点澄清。

jQuery's on()的目的是将事件处理程序附加到所选元素。 c参数的目的是创建委托处理程序。来自jQuery文档：

当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。

另外：

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

（我建议你顺便阅读关于直接和委派活动的整个部分。）

在任何情况下，对于您的特定示例，您希望以这样的方式构建DOM：在附加委托事件时，保证存在顶级元素。它可能是您的桌子，也可能是桌子上方的div元素。您也可以附加到正文或文档，但是，最好将事件附加到保证根据此文档存在的最接近元素：

在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为获得最佳性能，请将文档位置的委派事件尽可能靠近目标元素。避免过度使用文档或document.body来处理大型文档上的委托事件。

在您的特定情况下，表格似乎是一个保证元素。因此，您可以附加到它并委托内部的div。（当然，适当调整你的选择器以获得正确的div。）假设你想要所有div冒泡，那么你的附件将是这样的：

当然，您需要在document ready handler内执行此操作，以确保您的元素存在。

另外，请注意，ID不能以HTML 4规范中的数字开头。但是，如果您正在开发HTML 5，IDs can basically be anything只要它们是唯一的，就不包含任何空格，并且至少是一个字符。

Answer 3

关于你的事件处理程序的armada。

使用3个步骤为所有dom元素设置1个处理程序：

将序列号作为id的一部分，使它们可以区分。

然后只为身体mousedown调用实例化一个事件处理程序。没有更多for for for循环。

通过事件对象（事件回调的参数）区分，单击了哪个id。（我认为这是event.target或类似的）

关于注释中指出的这种用法，引用引用域对象的dom元素的id通常很有用。因此，显式id可以直接与底层资源标识符（pk ...）相关。

Answer 4

为每个#id创建一个委托是过度的

您可以直接将click事件附加到循环中的每个ID，或者简单地创建一个委托事件侦听器。

$("#table").on("click", "div", function(e){
   // use div.class to limit delegate
   // split id, pull values from the dom or innerText
   var el = this;
   var id = this.id;
});

jquery＆＃39; on＆＃39;不工作

4 个答案: