Targeting with "this" on dynamically loading

Question

I have a div in which an unordered list is being loaded into, dynamically. First, let me say that when the ul is hardcoded in, it works perfectly, the problem occurs when a new ul is loaded. Here's my javascript:

$('#products ul li').hover(function(){
   $(this).find(".productDesc").fadeToggle("slow");
});

The html of the code that is dynamically loaded into <div id='products'></div> is structured like so:

<ul id='category1'> 
  <li>
     <p class='productDesc'>description 1 here</p>
  </li>

  <li>
     <p class='productDesc'>description 2 here</p>
  </li>
</ul>

The problem lies in "this". When the new UL is dynamically loaded, "this" no longer seems to refer to the element I'm hovering on. Instead, it seems to refer to nothing at all. What can I do to make "this" work properly?

insert the first code after your ajax code and then attach the listeners... — Gowtham, Mar 31 '14 at 15:35
If the event is triggered for the dynamically loaded elements, then this will refer to the correct li element. It cannot refer to "nothing". So, is the handler actually triggered? — Felix Kling, Mar 31 '14 at 15:38
you need to look at [event delegation](http://learn.jquery.com/events/event-delegation/) and mouseenter and mouseleave events — Arun P Johny, Mar 31 '14 at 15:39
@FelixKling looks like the `ul li` are dynamically loaded the mouseenter and leave events are not fired — Arun P Johny, Mar 31 '14 at 15:39
@arun, most likely, still want to verify that, since the OP didn't explicitly say that the handler is not called. — Felix Kling, Mar 31 '14 at 15:41
@FelixKling `The problem lies in "this". When the new UL is dynamically loaded` - I think it is clear from that — Arun P Johny, Mar 31 '14 at 15:42
and http://stackoverflow.com/q/7972389/218196 and [potentially more](http://stackoverflow.com/search?q=%5Bjquery%5D+dynamic+element+hover). — Felix Kling, Mar 31 '14 at 15:56

score 1 · Accepted Answer · answered Mar 31 '14 at 15:40

1

You need to use event delegation since li the elements are added dynamically.

Since you are using hover, there is no hover event - it is a utility method to register both mouseenter and mouseleave events

$('#products').on('mouseenter mouseleave', 'ul li', function () {
    $(this).find(".productDesc").fadeToggle("slow");
});

answered Mar 31 '14 at 15:40

Arun P Johny

384,651
66
527
531

OP could also bind directly to the elements as they're created, which is sometimes more desirable than delegation for events that fire repeatedly, like `mouseenter/leave`. – cookie monster Mar 31 '14 at 15:46
Yes, that's it! I don't really understand the theory behind it, but it definitely fixed the problem. What about the .delegate method on jp310's answer? How are they different? – user2755541 Mar 31 '14 at 15:49
@user2755541 there is not much difference... `.on()` is the new method (>=1.7) where as delegate is there from 1.4.2... but new codes the recommended method is `on` – Arun P Johny Mar 31 '14 at 15:52

score 1 · Answer 2 · edited Mar 31 '14 at 15:47

1

$('#products').delegate('ul li','hover', function( event ) {
    if( event.type === 'mouseenter' )  
        //your code here 
    else
        //your code here  
});

edited Mar 31 '14 at 15:47

cookie monster

10,671
4
31
45

answered Mar 31 '14 at 15:43

pj013

1,393
1
10
28

Targeting with "this" on dynamically loading

2 Answers2