CODEWITHSUNDEEP
javascriptjqueryhtml
Richa
Richa

Reputation: 3289

Add Event listener using Jquery

I am creating a clone of a div, but unfortunately i am not able to add event listener to cloned div.

I tried using clone(true,true) but still did not get it running.

Can some one help me out with it please

JS fiddle for clone

Clicking image next to And, adds a new div

Code i tried for adding event listener

$("#add").on('click',function () {
    $("#cont").clone(true, true).appendTo(".container");

});

Upvotes: 0

Views: 265

Answers (1)

Andy
Andy

Reputation: 63524

First you should change your cont id to a class as multiple ids are bad and won't work properly.

Second, use jQuery's first method to grab the first in the returned jQuery nodelist that you get from grabbing all the cont classes: $('.cont') and then clone the node. You have to grab only the first one or you'll end up adding multiples of the div back on to the page.

$(".cont").first().clone(true, true).appendTo(".container");

Third, change the delete id to a class.

Fourth, because you're adding to the DOM you need to use event delegation on the parent node in order to catch the events properly. Use closest to find the nearest cont class and remove it.

$('.container').on('click', '.delete', function () {
    $(this).closest('.cont').hide();
});

Fiddle

Hope this helps.

Upvotes: 3

Related Questions