jQuery function over 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

• Hackerman: You have to add a listener on divContenido
• Esteban Cazorla: Sorry Hackerman, could you explain that a little more? I don't know what it is :(

Answer 1

Replace :

$(".divexpand").mouseenter(function(){

By :

$("body").on('hover', '.divexpand', function(){

You have to use on() to deal with tags added dynamically to the page.

Hope this helps.

• Zakaria Acharki: Make sure that the new divs has class divexpand.
• Esteban Cazorla: I didn't saw your edit! Now is ok, is the same response as spaniol6, thank you at all :D
• Zakaria Acharki: @SLaks please recheck my answer.
• Hackerman: Adding a listener to the entire document vs just the body....your code seems better to me... +1
• spaniol6: Thanks @Hackerman I wasn't aware using document was bad practice. I updated my answer and upvoted this one.

Answer 2

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).

• spaniol6: @EstebanCazorla I made an update based on some comments on the other answer. Please make sure to use the closest parent element to all the .divexpand elements instead of document.