Jquery Bootstrap closed.bs.Alert

Question

I am unable to execute the event code "closed.bs.Alert".

That is, execute a code after the total removal of a code snippet triggered when clicking the Close button of Alert in Bootstrap.

HTML:

<button id="btn_add">
  Add
</button>
<div id="result">
  <div class="col-md-12 alert">
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
      <div class="panel panel-default"><div class="panel-heading">0 [fixed]</div>
  </div>
</div>

SCRIPT:

$(document).ready(function(){
    var count = 1;
    $("#btn_add").click(function(){
        var str =   '<div class="col-md-12 alert">'+
                        '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>'+
                        '<div class="panel panel-default"><div class="panel-heading">'+count+' [dynamic]</div>'+
                    '</div>';
        $("#result").html($("#result").html()+str);
        count++;
    });
    $(".alert").on('closed.bs.alert', function(){
        alert('The alert message is now closed.');
    });
});

Code available here, in jsfiddle.

In this case, the fixed Bootstrap Alert works, but the dynamic does not. That is to say, in the dynamically created alerts I cannot execute the event code "closed.bs.Alert".

It should be something simple that I’m not able to solve, maybe I should implement something with This or create unique Ids for each dynamic alert that is created.

Note: after creating a dynamic alert the fixed alert also crashes for the event "closed.bs.Alert".

jsfiddle

Answer 1

Switch to something like:

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

See working on jsfiddle