closed.bs.alert

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

by Gabriel Rodrigues

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

var count = 1;

$("#btn_add").on('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++;


});

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