Question

I have a function that appen some html code to my already existing div like so:

<div id="my_ok_div">
<span>click me</span>
<div class="okay">ok</div>
</div>

jQuery to add divs:

$('#my_ok_div').click(function(){
$('#my_ok_div').append('<div class="okay">bla</div><div class="okay">bla bla</div>');  
});

also I have a function that work with div with class okay

$('.okay').click(function(){
  alert('all okay!'); 
})

this perfectly work for already existed div with class okay that contains “ok” word.
But, this not working for appended divs. Why and how i can fix this? Thanks.

Answer 1

You can either bind (or rebind) the event when you call .append, or you can use event delegation:

$("#my_ok_div").on('click', '.okay', function () {
   alert('all okay!');
});