Bootstrap closed.bs.alert doesnt fire when alert is being dynamically created

Question

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.

However I find that the dismissed event closed.bs.alert is never fired.

My javascript 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 = `
    
        Searching For`;
    var srmcl = ' ';
    var srmsgpost = `       
        
    
    `;
    var breadcrumb = `
        
            Home
        
        
            Patients
        
        Search results`;

    var srstr = $("#searchterm").val();
    sralmsg = srmsgpre + 'Patients:' + srmcl + srstr + srmsgpost;
    $('#presearch').html(sralmsg);
    return true;
}

My html code:





    
    
    

    
       
    Show Patients



    
        
    

        Patients


        
    

    
        
            
                Home
                    
                
            

            
                
                    Doctor
                
                
                    View Doctors
                    Add Doctor                 

                
            


            
                
                    Patients
                
                
                    View Patients
                    Add Patient            
                
            

            
                Appointments

                
            

            
                
                    Welcome, joel
                
                
                    Logout
                    My Profile
                    
                    My Appointments
                
            


            
        
        
            
                
                
                
            
        
    


    


    
        

    
        Home
    
    
        Patients
    
    Show Patients

        
    



    

    
    
        
            13 
            
                Epra Peter
                
            
            Age 45
            Mobile 0000
            Place 
            

                
                    
                            
                
                    
                                
                
                    
                


                
                    
                


            
        
    
    

    
    
        
            11 
            
                Jeffy Kelly
                
            
            Age 5
            Mobile 0000
            Place 
            

                
                    
                            
                
                    
                                
                
                    
                


                
                    
                


            
        
    
    

    
    
        
            15 
            
                Ramu Pillai
                
            
            Age 50
            Mobile 0000
            Place 
            

                
                    
                            
                
                    
                                
                
                    
                


                
                    
                


            
        
    
    

    
    
        
            
            add

JSFiddle: JSFiddle

As you can see above, I tried two different approaches. I'm not able to get the closed.bs.alert event to fire.

tao · Accepted Answer

Replace

$(function () {
    $('#srpatalert').on('closed.bs.alert', function () {
        console.log('Closed alert');
        window.location.href = "/appointments/patients";
    });
});

with

$('#navbar').on('close.bs.alert', '#srpatalert', function () {
  console.log('Closed alert');
  window.location.href = "/appointments/patients";
});

Notice that, besides delegating the event to #navbar, I also changed the event itself (from closed.bs.alert to close.bs.alert) as closed.bs.alert doesn't seem to fire in this example - I don't know why and, since it's working with close.bs.alert, I didn't investigate further.

Here's a working example:

$("document").ready(function() {
  $('body').on('click', '#mainsearch', function(event) {
    url = window.location.href;
    console.log('Clicked');
    SearchPatients();

  });

  $('#navbar').on('close.bs.alert', "#srpatalert", function() {
    console.log('Closed alert');
  });

  // don't mind next line, it's just for SO:
  $(document).on('click', 'a', e => e.preventDefault())
});

function makeAlert(category, term) {
  return $('', {
    id:'srpatalert',
    class:'mr-3 alert alert-info alert-dismissible fade show',
    role: 'alert'
  }).append($('',{text:'Searching For ' + category + ': '}))
    .append($('', {text: term}))
    .append($('

Patients Home Doctor View Doctors Add Doctor Patients View Patients Add Patient Appointments Welcome, joel Logout My Profile My Appointments Home Patients Show Patients
13 Epra Peter Age 45 Mobile 0000 Place 11 Jeffy Kelly Age 5 Mobile 0000 Place 15 Ramu Pillai Age 50 Mobile 0000 Place add

Bootstrap closed.bs.alert doesnt fire when alert is being dynamically created

Answers (2)

Related Questions