CODEWITHSUNDEEP
jqueryappend
Dima Deplov
Dima Deplov

Reputation: 3718

jquery event function to element that was added using .append()

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.

Upvotes: 3

Views: 120

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

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!');
});

Upvotes: 5

Related Questions