closed.bs.alert

How make closed.bs.alert event trigger work in dynamic content?

by Danilo Tostes

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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>

JavaScript

$(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.');
	});
});