Jquery code doesn't work on html created items

Question

check this https://jsfiddle.net/qh2pfhjy/

I am create a div on the fly but click function doesn't work.

Any idea?

Also my code is:

$("#helloDiv").click(function(){
    alert("The paragraph was clicked.");
});

$(document.body).append('<div id="helloDiv">Edit me</div>');

use $("#helloDiv").on('click',function(){ for dynamically created elements — Sushil, Jun 30 '15 at 17:44

score 2 · Accepted Answer · edited Jun 30 '15 at 17:49

2

To bind events to dynamically created elements, update code like this.

From

$("#helloDiv").click(function(){
    alert("The paragraph was clicked.");
});

To

$(document).on("click", "#helloDiv", function(){
    alert("The paragraph was clicked.");
});

Make sure you replace document by whatever parent context you have that is a) not dynamically created and b) as close as possible to your dynamically added div.

For reference - http://api.jquery.com/on/

https://jsfiddle.net/qh2pfhjy/2/

edited Jun 30 '15 at 17:49

connexo

53,704
14
91
128

answered Jun 30 '15 at 17:43

Nikhil Aggarwal

28,197
4
43
59

1

I wouldn't exactly apply that handler to `document` which is a first-class performance sin. Using on makes sense, but instead of `document` use the nearest available parent that's not dynamic. – connexo Jun 30 '15 at 17:46
So if i am create dynamicly items inside body what i need to know so can work? – Irene T. Jun 30 '15 at 17:46
@connexo - Thanks for pointing out. – Nikhil Aggarwal Jun 30 '15 at 17:48
http://api.jquery.com/on/ – connexo Jun 30 '15 at 17:49
@IreneT. - If you have elements dynamically getting added as direct child of body, then you should use document. – Nikhil Aggarwal Jun 30 '15 at 17:49

Jquery code doesn't work on html created items

1 Answers1