In Twitter Bootstrap, how do I unbind an event fro

Question

I have a function that is bound to the action of hiding a modal dialog.

I'm using code similar to the accepted answer to this question.

$('#myModal').on('hidden', function () {
    // do something…
})

However, this dialog may get reopened for editing, and, when that happens, I don't necessarily want to run this code. Is there a way to "unbind" the function so that it is no longer run when the dialog closes? I haven't found anything in the documentation.

Answer 1

You can do something like to unbind all events tied to the modal element:

Unbind all events in the modal:

/* First option */
$('#myModal').on('hidden', function (e) {
    $(e.currentTarget).unbind(); // or $(this)        
});

/* Second option is to call it directly when needed */
$('#myModal').unbind();

The Bootrap modal also have specific events tied to it, so you can also specify which event(s) you want to unbind.

/* Events are 'hidden', 'hide', 'show', 'shown' */
$('#myModal').unbind(/* specific event here */);

If you wish to remove events tied to the content of the modal, you can simply just empty the elements within $('#myModal').empty() and unbind those elements appropriately.

Answer 2

Use:

$('#myModal').off('hidden');

Why not unbind?

As of jQuery 3.0, .unbind() has been deprecated. It was superseded by the .off() method since jQuery 1.7, so its use was already discouraged.

Source: jQuery API.