jquery 'on' 不工作

Question

我静态创建了一个 table:

<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

关于您的事件处理程序舰队。

使用 3 个步骤使其成为所有 dom 元素的 1 个处理程序：

将序号作为 ID 的一部分，以区分它们。

然后只为主体 mousedown 调用实例化一个事件处理程序。不再有 for in for 循环。

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

关于评论中指出的 this 的用法，引用引用 domain 对象的 dom 元素的 ID 通常可能很有用。因此显式 id 可以直接与底层资源标识符（ pk ...）相关。

Answer 2

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

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

Answer 3

为每个 #id 创建一个委托是多余的

您可以直接将点击事件附加到循环中的每个 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;
});

Answer 4

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

jQuery's on() 的目的是将事件处理程序附加到所选元素。 selector 参数的目的是创建委托处理程序。来自 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.

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

在任何情况下，对于您的特定示例，您希望构建 DOM 时保证在附加委托事件时存在顶级元素。它可能是您的 table，或 table 上方的 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.

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

$('#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 只要它们是唯一的，不包含任何空格，并且至少是单个字符。

jquery 'on' 不工作

jquery 'on' not working

javascript

jquery

jquery-callback