Question

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

如何在文档就绪中将新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。

Working fiddle

此外，您可以使用hover()：

稍微整理一下代码

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

Example fiddle

Answer 2

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

<强>。对（）

描述：为一个或多个事件附加事件处理函数选定的元素。 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'});                   
});

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

3 个答案: