Question

I am trying to extend the Twitter Bootstrap’s Modal Plugin.
Is there a clean way to trigger an action when a modal popup is shown and hidden.

$("#xyz").clone().modal({"backdrop": "static", "keyboard":true, "show":true});
$("#xyz").on("shown", function(e){ console.log("hi");});

Tried the above but does nothing.

I don’t want to specify the above function for all modal calls in my code.
What I really want is to make a generic function for all modal whenever shown or hidden.

Thanks!

Answer 1

Your code isn’t working because you’re attaching the event handler to $('#xyz'), but you’re creating a modal from $('#xyz').clone(), which is a separate object.

Try:

$("#xyz").on("shown", function(e){ console.log("hi");});
$("#xyz").clone(true).modal({"backdrop": "static", "keyboard":true, "show":true});

Attach the event handler first, and then clone it, making sure to pass true as an argument so that all event handlers and data attached to $('#xyz') are passed to the cloned object.