Question

可能重复：
jquery bind functions and triggers after ajax call

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

该功能在加载页面时有效，但是当通过ajax加载新内容时，新div的功能无法正常工作

Answer 1

您需要使用委托：

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

但是，如果您的所有.chatr元素都有容器，请使用该容器的ID而不是document。

Answer 2

这是因为事件在页面加载时被连接起来。加载后会附加特定的.chatr元素，因此您必须使用所谓的委托事件处理程序。试试这个：

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

请注意，您应该将document替换为附加内容的最接近的静态父元素。

Answer 3

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

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

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

Answer 4

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

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