I am working with a single page application, There are some buttons which which opens this modal through data-target.

I need to hit an API when this "MODAL" opens up on screen through any of the button clicks. (There are multiple buttons which could open this modal)

One very messy way would be to attach an onclick event to every button. Could anyone suggest me a cleaner way to acplish this in which I could probably attach some kind of event handler to the modal?

here is the messy solution of my problem

<a data-target="#SomeModal" data-toggle="modal" href="#">
<button class="btn btn-success btn-lg" onclick="function_api_call();">
Click me</button>
</a>

I am working with a single page application, There are some buttons which which opens this modal through data-target.

I need to hit an API when this "MODAL" opens up on screen through any of the button clicks. (There are multiple buttons which could open this modal)

One very messy way would be to attach an onclick event to every button. Could anyone suggest me a cleaner way to acplish this in which I could probably attach some kind of event handler to the modal?

here is the messy solution of my problem

<a data-target="#SomeModal" data-toggle="modal" href="#">
<button class="btn btn-success btn-lg" onclick="function_api_call();">
Click me</button>
</a>

• javascript
• jquery
• twitter-bootstrap

• jQuery: $('.btn.btn-success').on('click', function_api_call); – lshettyl Commented Jun 1, 2015 at 14:13

2 Answers 2

You can listen to the modal show event :

$('#SomeModal').on('show.bs.modal', function (e) {
    // do something...
})

It will be called each time the modal is called, from direct js call and from data attribute

For reference (Bootstrap modal event list) : http://getbootstrap./javascript/#modals-events

add a class for the button for-example: myModalButtonsClass, and add an onclick event for that class instead of adding an onclick event for each and every button

$(".myModalButtonsClass").click(function(){ 


});