JQuery appending elements and acces to appended elements

Question

I have a code where i appending to div some html over JQuery like

$("#divId").append("<div class='click' data-id='id'></div>");

and I want to acces by click appended div like this

$(".click").click(function(){
var id = $(this).attr('data-id');
alert(id);
});

but when I click, nothink happens, is there some solution for this? Thanks!

possible duplicate of [Jquery click event not working after append method](http://stackoverflow.com/questions/15420558/jquery-click-event-not-working-after-append-method) — IROEGBU, Aug 21 '15 at 22:30
possible duplicate of http://stackoverflow.com/questions/32144892/jquery-dynamic-form-event-on-dynamic-field/32145552#32145552 — J Santosh, Aug 21 '15 at 22:35

Sushanth -- · Accepted Answer · 2015-08-21T22:33:22.080

0

You need to use event Delegation.

$("body").on('click', '.click', function(){
   var id = $(this).attr('data-id');
   alert(id);
});

As the events are only bound for already existing elements on the page. but in your case you are dynamically appending the elements.

body can also be substituted to the closest ancestor that contains these elements.

$("#divId").on('click',

edited Aug 21 '15 at 22:33

answered Aug 21 '15 at 22:29

Sushanth --

Is must be over body? or it can be divID? – koca79331 Aug 21 '15 at 22:31
It can be `#divId` too in this case. The close the container the better – Sushanth -- Aug 21 '15 at 22:34

1 Answers1