Click Action From Cloned Element Does Not Work

Click action won't work on any cloned element. http://jsfiddle.net/Q9m4t/ HTML

• hello del
• n

Solution 1:

Replace .clone() with .clone(true). This indicates you want to copy all event handlers over to the newly created cloned element. Read up more about this here.

jsFiddle here.

Solution 2:

From the jQuery .clone() documentation

Normally, any event handlers bound to the original element are not copied to the clone. The optional withDataAndEvents parameter allows us to change this behavior, and to instead make copies of all of the event handlers as well, bound to the new copy of the element. As of jQuery 1.5, withDataAndEvents can be optionally enhanced with deepWithDataAndEvents to copy the events and data for all children of the cloned element.

So, adding true to the .clone() method will allow you to keep all events.

.clone(true)

Solution 3:

Instead of using clone(true) which will create a new handler for each clone, you could delegate the click event:

$("ul").on("click",".del", function() {
    $(this).closest("li").remove();
    returnfalse;
});

DEMO