title: Bootstrap closed.bs.alert doesnt fire when alert is being dynamically created
body: <p>I have a page where I let the user search for information, and it displays an alert at the top stating that he is searching. He is then shown a filtered result. If he clicks the alert dismiss button, the main page is to be reloaded.</p>
  
  <p>However I find that the dismissed event <code>closed.bs.alert</code> is never fired.</p>
  
  <p>My javascript code:</p>
  
  <pre><code>$("document").ready(function () {
      $('body').on('click', '#mainsearch', function (event) {
          url = window.location.href;
          console.log('Clicked');
          SearchPatients();
  
      });
  
  
      $('body').on('closed.bs.alert', "#srpatalert", function () {
          console.log('Closed alert');
          window.location.href = "/appointments/patients";
      });
  
      $(function () {
          $('#srpatalert').on('closed.bs.alert', function () {
              console.log('Closed alert');
              window.location.href = "/appointments/patients";
          });
      });
  
  
  });
  
  
  function SearchPatients() {
      var srmsgpre = `
      &lt;div id="srpatalert" class="mr-3 alert alert-info alert-dismissible fade show" role="alert"&gt;
          &lt;strong&gt;Searching For`;
      var srmcl = ' &lt;/strong&gt;';
      var srmsgpost = `       
          &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      `;
      var breadcrumb = `
          &lt;li class="breadcrumb-item"&gt;
              &lt;a href="/appointments"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="breadcrumb-item"&gt;
              &lt;a href="/appointments/patients"&gt;Patients&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="breadcrumb-item active" aria-current="page"&gt;Search results&lt;/li&gt;`;
  
      var srstr = $("#searchterm").val();
      sralmsg = srmsgpre + 'Patients:' + srmcl + srstr + srmsgpost;
      $('#presearch').html(sralmsg);
      return true;
  }
  </code></pre>
  
  <p>My html code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;   
      &lt;title&gt;Show Patients&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="navbar"&gt;
          &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
      &lt;a class="navbar-brand" href="#"&gt;
  
          Patients
  
  
          &lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
              &lt;li class="nav-item active"&gt;
                  &lt;a class="nav-link" href="/appointments"&gt;Home
                      &lt;!-- &lt;span class="sr-only"&gt;(current)&lt;/span&gt; --&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                      aria-expanded="false"&gt;
                      Doctor
                  &lt;/a&gt;
                  &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                      &lt;a class="dropdown-item" href="/appointments/doctors"&gt;View Doctors&lt;/a&gt;
                      &lt;a class="dropdown-item" href="/appointments/createdoctor"&gt;Add Doctor&lt;/a&gt;                 
  
                  &lt;/div&gt;
              &lt;/li&gt;
  
  
              &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                      aria-expanded="false"&gt;
                      Patients
                  &lt;/a&gt;
                  &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                      &lt;a class="dropdown-item" href="/appointments/patients"&gt;View Patients&lt;/a&gt;
                      &lt;a class="dropdown-item" href="/appointments/createpatient"&gt;Add Patient&lt;/a&gt;            
                  &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="/appointments/getappointment"&gt;Appointments
  
                  &lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                      Welcome, joel
                  &lt;/a&gt;
                  &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                      &lt;a class="dropdown-item" href="/accounts/logout/?next=/appointments/patients"&gt;Logout&lt;/a&gt;
                      &lt;a class="dropdown-item" href="#"&gt;My Profile&lt;/a&gt;
                      &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                      &lt;a class="dropdown-item" href="/appointments/myappointments"&gt;My Appointments&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
  
  
              &lt;!-- &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
              &lt;/li&gt; --&gt;
          &lt;/ul&gt;
          &lt;!-- &lt;form class="form-inline my-2 my-lg-0"&gt; --&gt;
              &lt;div class="form-inline my-2 my-lg-0"&gt;
                  &lt;div id="presearch"&gt;&lt;/div&gt;
                  &lt;input id="searchterm" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"&gt;
                  &lt;button id="mainsearch" type="button" class="btn btn-success"&gt;Search&lt;/button&gt;
              &lt;/div&gt;
          &lt;!-- &lt;/form&gt; --&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
      &lt;/div&gt;
  
  
      &lt;nav aria-label="breadcrumb"&gt;
          &lt;ol id="breadcrumb" class="breadcrumb"&gt;
  
      &lt;li class="breadcrumb-item"&gt;
          &lt;a href="/appointments"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="breadcrumb-item"&gt;
          &lt;a href="/appointments/patients"&gt;Patients&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="breadcrumb-item active" aria-current="page"&gt;Show Patients&lt;/li&gt;
  
          &lt;/ol&gt;
      &lt;/nav&gt;
  
  
  &lt;div id="containerblock" class="container-fluid"&gt;
      &lt;div class="row"&gt;
  
      &lt;div class="col-sm-3 card-deck"&gt;
      &lt;div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;"&gt;
          &lt;div class="card-body"&gt;
              &lt;div id="id" style="display: none;"&gt;13 &lt;/div&gt;
              &lt;h2 class="card-title"&gt;
                  &lt;a href="/appointments/patient/13"&gt;Epra Peter&lt;/a&gt;
                  &lt;/a&gt;
              &lt;/h2&gt;
              &lt;h6 class="card-subtitle mb-2 text-muted"&gt;Age 45&lt;/h6&gt;
              &lt;p class="card-text"&gt;Mobile 0000&lt;/p&gt;
              &lt;p class="card-text"&gt;Place &lt;/p&gt;
              &lt;div id="docbtngp" class="d-flex flex-row"&gt;
  
                  &lt;a href="/appointments/patient/edit/13" class="btn btn-primary mr-1"&gt;
                      &lt;i class="fas fa-user-edit"&gt;&lt;/i&gt;
                  &lt;/a&gt;            
                  &lt;a href="/appointments/patient/calendar/13" class="btn btn-primary mr-1"&gt;
                      &lt;i class="fas fa-calendar"&gt;&lt;/i&gt;
                  &lt;/a&gt;                
                  &lt;a href="/appointments/patient/appointment/add/13" class="btn btn-primary mr-1"&gt;
                      &lt;i class="fas fa-calendar-plus"&gt;&lt;/i&gt;
                  &lt;/a&gt;
  
  
                  &lt;a href="/appointments/patient/remove/13" class="btn btn-danger mr-1"&gt;
                      &lt;i class="fas fa-trash-alt"&gt;&lt;/i&gt;
                  &lt;/a&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-sm-3 card-deck"&gt;
      &lt;div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;"&gt;
          &lt;div class="card-body"&gt;
              &lt;div id="id" style="display: none;"&gt;11 &lt;/div&gt;
              &lt;h2 class="card-title"&gt;
                  &lt;a href="/appointments/patient/11"&gt;Jeffy Kelly&lt;/a&gt;
                  &lt;/a&gt;
              &lt;/h2&gt;
              &lt;h6 class="card-subtitle mb-2 text-muted"&gt;Age 5&lt;/h6&gt;
              &lt;p class="card-text"&gt;Mobile 0000&lt;/p&gt;
              &lt;p class="card-text"&gt;Place &lt;/p&gt;
              &lt;div id="docbtngp" class="d-flex flex-row"&gt;
  
                  &lt;a href="/appointments/patient/edit/11" class="btn btn-primary mr-1"&gt;
                      &lt;i class="fas fa-user-edit"&gt;&lt;/i&gt;
                  &lt;/a&gt;            
                  &lt;a href="/appointments/patient/calendar/11" class="btn btn-primary mr-1"&gt;
                      &lt;i class="fas fa-calendar"&gt;&lt;/i&gt;
                  &lt;/a&gt;                
                  &lt;a href="/appointments/patient/appointment/add/11" class="btn btn-primary mr-1"&gt;
                      &lt;i class="fas fa-calendar-plus"&gt;&lt;/i&gt;
                  &lt;/a&gt;
  
  
                  &lt;a href="/appointments/patient/remove/11" class="btn btn-danger mr-1"&gt;
                      &lt;i class="fas fa-trash-alt"&gt;&lt;/i&gt;
                  &lt;/a&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-sm-3 card-deck"&gt;
      &lt;div class="card mb-3 mr-3 ml-3 shadow bg-white rounded" style="width: 18rem;"&gt;
          &lt;div class="card-body"&gt;
              &lt;div id="id" style="display: none;"&gt;15 &lt;/div&gt;
              &lt;h2 class="card-title"&gt;
                  &lt;a href="/appointments/patient/15"&gt;Ramu Pillai&lt;/a&gt;
                  &lt;/a&gt;
              &lt;/h2&gt;
              &lt;h6 class="card-subtitle mb-2 text-muted"&gt;Age 50&lt;/h6&gt;
              &lt;p class="card-text"&gt;Mobile 0000&lt;/p&gt;
              &lt;p class="card-text"&gt;Place &lt;/p&gt;
              &lt;div id="docbtngp" class="d-flex flex-row"&gt;
  
                  &lt;a href="/appointments/patient/edit/15" class="btn btn-primary mr-1"&gt;
                      &lt;i class="fas fa-user-edit"&gt;&lt;/i&gt;
                  &lt;/a&gt;            
                  &lt;a href="/appointments/patient/calendar/15" class="btn btn-primary mr-1"&gt;
                      &lt;i class="fas fa-calendar"&gt;&lt;/i&gt;
                  &lt;/a&gt;                
                  &lt;a href="/appointments/patient/appointment/add/15" class="btn btn-primary mr-1"&gt;
                      &lt;i class="fas fa-calendar-plus"&gt;&lt;/i&gt;
                  &lt;/a&gt;
  
  
                  &lt;a href="/appointments/patient/remove/15" class="btn btn-danger mr-1"&gt;
                      &lt;i class="fas fa-trash-alt"&gt;&lt;/i&gt;
                  &lt;/a&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="menu pmd-floating-action pmd-lg" role="navigation"&gt;
          &lt;a href="/appointments/patient/add" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default pmd-lg"
              data-title="Add a new patient"&gt;
              &lt;span class="pmd-floating-hidden"&gt;&lt;/span&gt;
              &lt;i class="material-icons"&gt;add&lt;/i&gt;
          &lt;/a&gt;
  
      &lt;/div&gt;
  
      &lt;div id="messages"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  
      &lt;!-- Optional JavaScript --&gt;
  
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
  
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;   
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/droidzone/cmw7uszt/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>As you can see above, I tried two different approaches. I'm not able to get the closed.bs.alert event to fire.</p>