fumeng fumeng - 4 months ago 19
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:

$('#submit_btn').click(function(event){
event.preventDefault();
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

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.

/edit

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?

Comments