jQuery函数优于ajax

Question

I have some jQuery functions defined over some mouse events, for example something like

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

This works well in all my .divexpand classes, the problem is when i have some of my content generated with ajax, something like

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

In that case, .divexpand classes in activityedit-prop.php are ignoring the jQuery functions...

Can someone tell me why?

Thanks

Answer 1

This is because when you run $(".divexpand").mouseenter() it binds a mouseenter event to each divexpand that exists on the DOM at that time. So by the time your AJAX is ran, the binding has already happened.

What you need to do is bind the mouseenter event to an element that encompasses all .divexpand (such as the body) and tell it to trigger only on child elements that fit a certain selector. 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")
});

Edit:

After reading Hackerman's comment on Zakaria Acharki's answer I looked up if there was really anything wrong with using document as the delegate. I found this answer on a separate question that explains that you shouldn't use document to delegate events and it's best practice to use the closest parent to the element. I updated my code to use body instead of document (since i don't know what the closest parent element in this case is).