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

Sorry Hackerman, could you explain that a little more? I don't know what it is :( — Esteban Cazorla, Dec 01 '15 at 18:27

Zakaria Acharki · Answer 1 · 2015-12-01T18:24:32.160

3

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.

edited Dec 01 '15 at 18:24

answered Dec 01 '15 at 18:20

Zakaria Acharki

66,747
15
75
101

Make sure that the new divs has class `divexpand`. – Zakaria Acharki Dec 01 '15 at 18:29
I didn't saw your edit! Now is ok, is the same response as spaniol6, thank you at all :D – Esteban Cazorla Dec 01 '15 at 18:35
@SLaks please recheck my answer. – Zakaria Acharki Dec 01 '15 at 18:36
2

Adding a listener to the entire document vs just the body....your code seems better to me... +1 – Hackerman Dec 01 '15 at 18:38
Thanks @Hackerman I wasn't aware using document was bad practice. I updated my answer and upvoted this one. – spaniol6 Dec 01 '15 at 18:57

score 2 · Accepted Answer · edited May 23 '17 at 10:27

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

@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. — spaniol6, Dec 01 '15 at 19:00

jQuery function over ajax

2 Answers2