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

Question

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

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

如何在documentready中为当前事件处理程序分配新的div？

Answer 1

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

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

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

工作小提琴

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

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

小提琴示例

Answer 2

您尝试过使用.on（）吗？或者旧版本的jQuery 1.7中的.bind（）-？

.on（）

描述：为一个或多个事件附加事件处理程序函数到所选元素。http://api.jquery.com/on/

.bind（）

描述：将处理程序附加到元素的事件。

http://api.jquery.com/bind/

Answer 3

或者使用live（）。这适用于jquery 1.4+，在1.7中已弃用，但仍适用于

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