fumeng fumeng - 1 year ago 111
Javascript Question

Button click not firing in modal window (Bootstrap)

I have a button in a modal window:

<button id="submit_btn" class="btn btn-link">Send the invitation</button>

I'm trying to capture the click:

alert( "GO" );

I've read that button clicks get swallowed in modal windows and that, to prevent that, use event.preventDefault(). But that's not working. I can't capture the click event of this button.

What else am I missing?

Any tips are greatly appreciated!

Answer Source

Try this -

$(document).on("click", "#submit_btn", function(event){
    alert( "GO" ); 

Or this -

$(document).delegate("#submit_btn", "click", function(event){
    alert( "GO" ); 

If you are using an older version of jQuery you may have to use the live method instead.

Live method (use this only if you have to)

$("#submit_btn").live("click", function(event){
    alert( "GO" ); 

I'm fairly certain that one of these 3 methods above will solve your issue. The reason your event handler doesn't work is because your submit_btn element doesn't exist at the time your event handler is evaluated. The above 3 handlers I gave you will work on a submit_btn element that exists now and in the future.


Here is a jsfiddle that works - http://jsfiddle.net/GqD4f/8/

/another edit

I made a jsfiddle using the approach you had in your post and it works - http://jsfiddle.net/CR3bM/1/

Are you not putting your event handler in DOM ready?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download