javascript - jquery 'on' 不工作

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 函数上，但我不知道如何解决。

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

这里还有其他答案是正确的，但我想补充一点说明。

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

The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.

此外:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

(我建议您顺便阅读有关直接和委托(delegate)事件的整个部分。)

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

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

在您的特定情况下，表格似乎是有保证的元素。因此，您可以附加到它并委托(delegate)其中的 div。 (当然，适当调整你的选择器以获得正确的 div。)假设你希望所有的 div 冒泡，那么你的附件将是这样的:

$('#table').on('mousedown', 'div', function(e) {
  console.log('Do some stuff here.');
});

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

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