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

Question

div我有一组通过 jQuery 动态加载的 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为执行上述脚本时存在的最近容器。