CODEWITHSUNDEEP
jqueryinternet-explorertwitter-bootstrap
D A
D A

Reputation: 413

Problems with Bootstrap modal events in Internet Explorer

I have problem with the Bootstrap Modal events in Internet Explorer.

I have several modals in a site I'm building and each of them have a number of links that when clicked will do different things once the modal has been hidden. The problem is that these events will not fire unless the modal has been opened and closed at least once in Internet Explorer.

Some code, this would repeat for every button in my modal, with different events happening when closed:

$('#my-btn').on('click', function() {
    $("#my-modal").modal('hide').on('hidden', function(){
        alert("This wont fire in IE first time around");
    });
});

My workaround (UGLY):

var modal_func_to_run;  
$("#my-modal").on('hidden', function(){
    if ( modal_func_to_run == 'first' )
        alert("This will fire in IE");
    else if ( modal_func_to_run == 'second' )
        alert("The second button was clicked!");
});
// ....
$('#my-btn').on('click', function() {
    modal_func_to_run = 'first';
    $('#my-modal').hide();
});

Does anyone have a better way to solve the issue in Internet Explorer?

I run Bootstrap 2.3.2 and jQuery 1.10.1.

Upvotes: 2

Views: 3887

Answers (1)

DGS
DGS

Reputation: 6025

Try 

$('#my-btn').on('click', function() {
    $("#my-modal").on('hidden', function(){
        alert("This wont fire in IE first time around");
    }).modal('hide');
});

Just changes the order of binding so that the event handler gets bound to the modal before the hide call

Upvotes: 1

Related Questions