jquery - ajax后功能不起作用

Question

可能重复：
ajax调用后jquery绑定函数和触发器

    $('.chatr').mouseover(function() {
    $('#'+this.id+" .action").removeClass('dn');
    });

该功能在页面加载时起作用，但是当通过ajax加载新内容时，新div的功能不起作用

score 2 · Accepted Answer

您需要使用委托：

$(document).on('mouseover', '.chatr', function() {
    $(this).find('.action').removeClass('dn');
});

但是，如果您有一个包含所有.chatr元素的容器，请使用该容器的 ID 而不是document.

score 1 · Accepted Answer

这是因为事件与页面加载有关。加载后附加特定.chatr元素，因此您必须使用所谓的委托事件处理程序。尝试这个：

$(document).on('mouseover', '.chatr', function() {
    $('#' + this.id + " .action").removeClass('dn');
});

请注意，您应该document使用要附加内容的最近的静态父元素替换。

score 0 · Accepted Answer

jQuery 事件处理程序仅绑定到执行代码时存在的元素。在该代码执行后添加的元素不会自动绑定事件处理程序，即使它们符合选择器的条件。解决方案是事件委托：

$(document).on('click', '.chatr', function(e) {
    $('#'+this.id+" .action").removeClass('dn');
});

理想情况下，您将调用.on()函数（并将事件处理程序绑定到）最近的静态祖先元素（即始终存在并且将始终包含您要为其触发事件的元素），而不是document. 如果没有看到 HTML，就不可能知道应该是哪个元素。

score 0 · Accepted Answer

这不适用于动态创建的元素，因为在初始页面加载后，事件处理程序绑定被删除\未为新添加的元素设置。

您可以做的是将事件侦听器添加到 '.chatr' div 的父元素，并通过 $(event.target).hasclass('chatr') 检查以确定事件是否应该触发

4 回答 4