CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
lucygenik
lucygenik

Reputation: 1738

Bootstrap Modal buttons do not respond to click

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?

Upvotes: 3

Views: 12622

Answers (2)

Jake Feasel
Jake Feasel

Reputation: 16955

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');
});

Upvotes: 0

lucygenik
lucygenik

Reputation: 1738

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.

Upvotes: 1

Related Questions