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

Question

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

Answer 1

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);
    }); 

Answer 2

or you can try this :

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

Answer 3

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();
});

Answer 4

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.

Answer 5

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;
                });
            }

Answer 6

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