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加载的。

在这种情况下我该怎么办？我怎样才能对后来出现的元素进行某种“后期约束”？

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替换为执行上述脚本时存在的最近容器。

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

1 个答案: