Catching a click event for a dynamically generated alert box

Question

I am generating some twitter bootstrap alert messages and i want to remove the ones i have read and only be left with the ones i like to investigate further.

This how i generating them

$a =  $this->session->userdata('identity');
    $ar = trim($a,",");
    $arr = explode(',', $a);
    foreach($arr as $key => $value){
    echo '<div class="cb alert alert-warning"><a href="#" class="close" data-dismiss="alert" data-array-key="'.$key.'">&times;</a><strong>Warning!</strong> '.$value.' </div>' .'<br/>';
    }

This is my jquery code

(function ($) {
$( ".close" ).on('click', function() {
alert('close clicked');
});
})(jQuery);

I know my code works because it works on jsfiddle http://jsfiddle.net/15oar2gr/

Why is my code not working for dynamically generated content?.

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — mplungjan, Jan 23 '15 at 09:45

score 1 · Answer 1 · answered Jan 23 '15 at 09:43

1

Try Event Delegation like following:

$( "body" ).on('click','.close', function() {
   alert('close clicked');
});

answered Jan 23 '15 at 09:43

Manwal

23,450
12
63
93

score 1 · Accepted Answer · answered Jan 23 '15 at 09:43

1

Try this

$( document ).on('click',".close", function() {
 alert('close clicked');
});

answered Jan 23 '15 at 09:43

Sreelal P Mohan

309
1
11

score 1 · Answer 3 · answered Jan 23 '15 at 09:43

1

If you change your click event to:

$(document).on('click', '.close', function () {});

it'll work.

answered Jan 23 '15 at 09:43

Ben Win

830
8
21

Catching a click event for a dynamically generated alert box

3 Answers3