.hover事件不适用于页面加载后动态加载的元素

Question

我对通过jQuery动态加载的一组div s有以下事件处理函数。

$(document).ready(function() { 
    $('.one span').hover(function() { 
     $(this).animate({ backgroundColor: '#666666', color: '#DDDDDD', marginRight: 5 }, 250); 
    }, function() { 
     $(this).animate({ backgroundColor: '#DDDDDD', color: '#666666', marginRight: 0 }, 250); 
    }); 
}); 

的问题是，这些事件处理程序不被解雇，我怀疑这可能是因为$('.one span')通过jQuery的页面加载后，这些元素被加载。

在这种情况下我该怎么办？我怎么能对后来会出现的元素进行某种“后期绑定”？

Answer 1

而不是$('.one span').hover(使用委托事件，因为它被动态添加到DOM。见下文，

$(document).on('mouseenter', '.one span', function() { 
    $(this).animate({ backgroundColor: '#666666', color: '#DDDDDD', marginRight: 5 }, 250); 
}).on('mouseleave', '.one span', function() { 
    $(this).animate({ backgroundColor: '#DDDDDD', color: '#666666', marginRight: 0 }, 250); 
}); 

更换document与执行上面的脚本时存在最接近的容器。