CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
pewpewlasers
pewpewlasers

Reputation: 3215

shown.bs.modal fires multiple times when you close and reopen modal

I have made a fiddle illustrating the issue I am facing at the moment. So every time I close and open a modal, shown.bs.modal also fires multiple times. In this fiddle, every time you close and open a modal, number of alerts also increases (when it's supposed to trigger only once). http://jsfiddle.net/j36h2/1/

function openTestModal(){
    $('#testModal').modal({
        keyboard: false,
        backdrop: 'static'
    });

    $('#testModal').on('shown.bs.modal', function (e) {
        alert('');
    });
}

$('.testButton').click(function(){
    openTestModal();
});

Upvotes: 21

Views: 30110

Answers (7)

Maksym Kalin
Maksym Kalin

Reputation: 1713

You can try as following: (Bootstrap v3.3.6)

$('#dialog')
.modal({show: false})
.on('hide.bs.modal', function () {
    //..................
}).on('shown.bs.modal', function (event) {
    //..................                  
}).on('hidden.bs.modal', function () {
    $("#dialog").off();
});
$('#dialog').modal('show');

Upvotes: 0

smoksnes
smoksnes

Reputation: 10851

The accepted answer from @Put12co22mer2 is correct. However, there are times when you want to rebind the event when opening the modal. Let's say you got some options that should be used.

function openTestModal(options){
    $('#testModal').modal({
        keyboard: false,
        backdrop: 'static'
    });

    $('#testModal').one('shown.bs.modal', function (e) {
        // do something with options
        alert(options.foo);
    });
}

$('.testButton').click(function(){
    openTestModal({ foo: bar});
});

Then you can use one instead of on. The result will be the same as unbinding, but a bit cleaner in my opinion.

http://api.jquery.com/one/

The .one() method is identical to .on(), except that the handler is unbound after its first invocation

Upvotes: 29

pasx
pasx

Reputation: 2975

The function below is used for all the dialogs in my application.

It gets called each time with a different callback to execute. The easiest solution for me is simply to remove the event handler before adding a new one.

function messageBox(action,...) {               
    $("#modal-btn-ok").off("click");
    $("#modal-btn-ok").on("click", function(e) {
        action(e);
    });

Upvotes: 7

ilan weissberg
ilan weissberg

Reputation: 668

or you can try this :

$('#testModal').on('shown.bs.modal', function (e) {
 alert('');
 $(this).off('shown.bs.modal');
});

Upvotes: 39

BENARD Patrick
BENARD Patrick

Reputation: 30975

You need to extract your alert function out from your click event :

http://jsfiddle.net/SyCNj/2/

extract :

function openTestModal(){
    $('#testModal').modal({
        keyboard: false,
        backdrop: 'static'
    });
}

$('#testModal').on('shown.bs.modal', function (e) {
   alert('');
});

$('.testButton').click(function(){
    openTestModal();
});

Upvotes: 19

Ram
Ram

Reputation: 144689

That's because your are attaching several event handlers for the event, at first click you are listening once, on the second click twice and so on, listen to the event outside the context of openTestModal function.

Upvotes: 4

Priya jain
Priya jain

Reputation: 703

Define variable and set it's value to 1; like: 

function openTestModal(){
                $('#testModal').modal({
                    keyboard: false,
                    backdrop: 'static'
                });
               var e=1;
                $('#testModal').on('shown.bs.modal', function (e) {
                    alert('');
                    e=0;
                });
            }

Upvotes: 0

Related Questions