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.

Answer 1

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);
});