jquery .delegate and dynamic content

Question

I have to following HTML:

<ul class="ulclass">
   <li class="liclass">
      ...some more nesting
           <a href="somelink">somelink</a>
      ....close nesting
   </li>
   <li class="liclass">
   ...

</ul>

There is a click event on each li from the class "liclass", so I stop the bubbling from the anchor with (presumably <div> is inside of .liclass):

$(".liclass div").delegate("a", "click", function(e) {
          e.stopPropagation();        
});

Now I add more <li class="liclass"> with Ajax .load. The stopPropagation works for the static ".liclass" but not for the dynamically added. Assume that the code for <ul class="ulclass"> is there when the page is loaded. Can you please let me know how the change .delegate in order to stop the bubbling for the dynamically added .liclass.

RightSaidFred · Accepted Answer · 2011-12-04T13:59:39.557

4

Place another delegate handler on whatever contains the dynamically created elements, in this case the ul, to stop the propagation.

$("ul.ulclass").delegate(".liclass div", "click", function(e) {
          e.stopPropagation();        
});

$("ul.ulclass").delegate(".liclass", "click", function(e) {
          // main code for each li element    
});

Because they're both delegate methods on the same element, the e.stopPropagation() should work to prevent the handler even though the event has already bubbled up.

JSFIDDLE DEMO

Updated the demo to show it working with dynamic elements.

An alternative would be to simply bind handlers directly to your dynamically created div elements.

So if you're using .load(), I assume you're wiping out the old content and replacing it with new. In that case, in the callback, just select the divs, and rebind the handler.

$("ul.ulclass").load('/whatever/', function() {
      // shortcut to binding a handler with stopPropagation and preventDefault
    $(this).find('li.liclass div').bind('click', false);
});

edited Dec 04 '11 at 13:59

answered Dec 04 '11 at 13:25

RightSaidFred

11,209
35
35

Still nothing, the bubbling is not stopped. Your DEMO does not use .load. Again, my old code works fine when everything is static, but once I start using .load it breaks down. – user1073201 Dec 04 '11 at 13:38
@user1073201: The fact that my code does not use load shouldn't matter. If you add new elements to the `ul`, they'll behave the same as the original. [Here's an example](http://jsfiddle.net/DPq9W/1/) that dynamically adds new elements ever 2 seconds. Their behavior is the same as the original. – RightSaidFred Dec 04 '11 at 13:48
Thanks for the help. Dynamically added new elements do not behave as the original (the proof is the problem that I have). I can see that your demo works well, however, I still cannot get my code to work. Can the problem be in the fact that I have this nesting (a bunch of divs and table tags between the .liclass and the anchor)? – user1073201 Dec 04 '11 at 14:12
@user1073201: I would need to see more of your code to know what is happening. There could be issues with nesting, or if you have some invalid markup, the browser may be doing some adjustments resulting in an unexpected hierarchy of elements. Could you edit your question to post a more complete sample of your HTML? – RightSaidFred Dec 04 '11 at 14:18

score 0 · Answer 2 · answered Dec 04 '11 at 13:25

0

You need to call ".delegate" after each ajax request is completed in order for this to work.

answered Dec 04 '11 at 13:25

score 0 · Answer 3 · answered Dec 04 '11 at 13:36

0

If you're using latest version of jQuery, correct code would be:

$(document).on("click", ".liclass a", function(e) {
  e.stopPropagation();        
});

answered Dec 04 '11 at 13:36

Kane Cohen

1,790
12
17

It does not work. I think you are forgetting that .liclass is loaded dynamically. I guess I have to hook up the event somehow with the parent class .ulclass which is there when the page loads, but I don't know how. – user1073201 Dec 04 '11 at 13:41
Hmm, it should work anyway since listener is added to document. That version is for jQuery 1.7.1. Example: [jsfiddle](http://jsfiddle.net/NbhfN/) – Kane Cohen Dec 04 '11 at 13:44
I need more details on what you add and what other listeners do you have. – Kane Cohen Dec 04 '11 at 14:20

score 0 · Answer 4 · answered Dec 04 '11 at 13:46

Event delegation means: The event already bubbled to a "higher level" element. It is not possible to stop the propagation to this element any more (because it already happened). The propagation can only be stopped for elements even higher in the hierarchy. It will not work at all if you bound the delegate to "document" already.

jquery .delegate and dynamic content

4 Answers4

Linked