JQuery Bootstrap closed.bs.alert

I'm not able to run the event code "closed.bs.alert".

That is, execute a code after the total removal of a snippet of code triggered when the Alert Close button is clicked on 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.');
    });
});

Available code here in jsfiddle.

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

It should be something simple that I can not 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 will also stop working for the "closed.bs.alert" event.

jsfiddle