Bootstrap Modal buttons do not respond to click

Question

I am having a mare with Bootstraps buttons in a modal popover. Whatever I do I cannot get the click event to fire. Latest Bootstrap, jQuery 1.7.1.

Inside the modal I have a footer with buttons

<div class="modal-footer">
  <a href="#" class="btn cancelBtn">Cancel</a>
  <a href="#" class="btn dontSaveBtn">Don't Save</a>
</div>

And my JS that is not working (click is never fired)

$("#navigate-away .cancelBtn").on("click", function(event){
  console.log('Click.');
  $('#navigate-away').modal('hide');
});

I can prove it works by using hover instead of click (hover fires ok)

$("#navigate-away .cancelBtn").on("hover", function(event){
  console.log('Click.');
  $('#navigate-away').modal('hide');
});

It seems the click event is being swallowed internally? I see all over SO people using this exact method with no problems. What simple thing am I missing?

Answer 1

This did indeed to turn out to be a conflict with another library. It was a shocker to debug, I ended up getting it relatively simply using Allan Jardine's Visual Event bookmarklet at http://www.sprymedia.co.uk/article/Visual+Event . Thanks Allan you saved my baconator.

Answer 2

Try adding preventDefault to your click event, and changing to use the delegate style of binding:

$("#navigate-away").on("click", ".cancelBtn", function(event){
  event.preventDefault();
  console.log('Click.');
  $('#navigate-away').modal('hide');
});