javascript - jQuery在Ajax上的功能

我在一些鼠标事件上定义了一些jQuery函数，例如

$(".divexpand").mouseenter(function(){
var alto = $(this).find('.checkalign').length*21+"px";
$(this).animate({height: alto}, 100)
$(this).css("z-index","100")
});

这在我的所有.divexpand类中都很好用，问题是当我用ajax生成某些内容时，例如

ajax.open("GET", "modules/activityedit-prop.php?id="+id);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
  divContenido.innerHTML = ajax.responseText
  }
}

在这种情况下，.divexpand中的activityedit-prop.php类将忽略jQuery函数...

有人可以告诉我为什么吗？

谢谢

最佳答案

这是因为当您运行$(“。divexpand”)。mouseenter()时，它将mouseenter事件绑定(bind)到当时在DOM上存在的每个divexpand。因此，当您运行AJAX时，绑定(bind)已经发生。

您需要做的是将mouseenter事件绑定(bind)到包含所有.divexpand的元素(例如body)，并告诉它仅在适合某个选择器的子元素上触发。 more about jQuery.on

$("body").on('mouseenter','.divexpand',function(){
    var alto = $(this).find('.checkalign').length*21+"px";
    $(this).animate({height: alto}, 100)
    $(this).css("z-index","100")
});

编辑:

在阅读Hackerman对Zakaria Acharki的回答的评论后，我查找了使用文档作为委托(delegate)人确实存在任何问题。我在另一个问题上找到了this answer，该问题说明您不应该使用文档来委托(delegate)事件，并且最佳实践是使用与元素最接近的父对象。我更新了代码以使用主体而不是文档(因为在这种情况下我不知道最接近的父元素是什么)。