jquery .delegate and dynamic content

Question

I have to following HTML:

   

      ...some more nesting
           somel         


        

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