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

Question

我有一组 div 的以下事件处理程序通过 jQuery 动态加载。

$(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加载。

遇到这种情况我能做什么？如何对稍后出现的元素进行某种“后期绑定(bind)”？

Answer 1

不要使用 $('.one span').hover( 使用委托(delegate)事件，因为它是动态添加到 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 替换为执行上述脚本时存在的最接近的容器。