jquery - 新追加的 div 不会继承文档就绪中的事件处理程序

Question

如果我在运行时附加新的 div，新创建的 div 不会与文档就绪中的事件处理程序连接。

例如，http://jsfiddle.net/nFG24/

如何将新的 div 分配给文档就绪中的当前事件处理程序？

Answer 1

快捷事件处理程序(例如 click()、mouseover() 等)仅适用于页面加载时 DOM 可用的元素。动态附加元素时，您必须将事件附加到静态父元素，并提供您希望将事件委托(delegate)给的过滤器，如下所示:

$("body").on('mouseover', '.hoverme', function() {
    $(this).css({backgroundColor: '#000'});                    
});
$("body").on('mouseout', '.hoverme', function() {
    $(this).css({backgroundColor: '#0af'});                 
});

请注意，我在这里使用 body 作为主要选择器。理想情况下，您应该使用最接近 .hoverme 元素的包含元素，该元素不会动态附加到 DOM。

Working fiddle

此外，您可以使用 hover() 稍微整理一下代码:

$("body").on('hover', '.hoverme', function(e) {
    if (e.type === 'mouseenter')
        $(this).css({backgroundColor: '#000'}); 
    else
        $(this).css({backgroundColor: '#0af'});          
});

Example fiddle