css - Newly added element with multiple div's using JQuery -

css - Newly added element with multiple div's using JQuery -

this question has reply here:

event binding on dynamically created elements? 13 answers

why cannot text of newly added multiple kid div's. i'm using jquery add together dynamic elements. here sample fiddle: jsfiddle

can explain me did go wrong?

script

var counter = 0; $("button").click(function() { $("<div class='child-list-workorder'>\ <div class='list-workorder'>\ <div class='list-workorder-header'>\ <h3 id='" + counter + "' class='list-workorder-id'>click me " + (++counter) + "</h3>\ </div>\ <p>" + counter + "</p>\ </div>\ </div>").appendto("div.parent-list-workorder"); }); $("div.list-workorder-header").on("click", "h3.list-workorder-id", function(){ alert(this.id); });

you have utilize delegated event html generated dynamically:

$(document).on("click", "h3.list-workorder-id", function(){ alert(this.id); });

your div class child-list-workorder generated dynamically :

$(".child-list-workorder").on("click", "h3.list-workorder-id", function(){ ...............

will not work generated dynamically.

or can utilize parent div has class parent-list-workorder loaded on dom load:

$(".parent-list-workorder").on("click", "h3.list-workorder-id", function(){ alert(this.id); });

working updated fiddle

jquery css ajax dynamic elements