Button click not firing in modal window (Bootstrap)

Question

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 1

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?

Answer 2

This works for me:

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

Answer 3

Here is how I did with class(.copy-text).

Javascript:

$(document).on('click', '.copy-text', function(){
    console.log($(this));
});

Modal html:

<div class="modal fade" id="someid" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-body">    
      <ul class="list-group"> 
        <li class="list-group-item copy-text">Some text</li>
      </ul>
    </div>
  </div>
</div>