Question

I have this <li>, that when you click it, it creates another <li> before it (with a bunch of classes applied to it), which is all working great.. Problem is, I can’t modify (via jQuery) the newly created <li> elements because they were created dynamically.

Currently, it is setup as:

 $(".foo").on("click", function() {
//Blah blah blah
});

And I have already tried the code below instead, which still did not work.

$(".foo").on("click", function() {
//Blah blah blah
});

Thanks for your help in advance!

Answer 1

Try this approach:

  $("ul").on('mouseup', '.item', function() {
    $(this).toggleClass("completed");
  });

JS Fiddle demo.

The problem you were having is that the .item elements weren’t present in the DOM at the point at which the mouseup event was bound to them. This approach binds the mouseup to the ul which does exist, and uses the on() method to listen for that event and, if the target element matches the selector (.item) passed to the method it implements the anonymous function (the third argument passed to the method).

If the target does not match that selector then the event either does nothing or contiunues to propagate through the ancestors.