Bootstrap 模态按钮不响应点击

Question

我在模态弹出框中有一匹带有 Bootstraps 按钮的母马。无论我做什么，我都无法触发点击事件。最新的 Bootstrap，jQuery 1.7.1。

在模态框内我有一个带按钮的页脚

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

而我的 JS 不工作（从不触发点击）

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

我可以通过使用悬停而不是单击来证明它有效（悬停触发正常）

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

似乎点击事件在内部被吞没了？我看到所有的人都在使用这种精确的方法，没有任何问题。我错过了什么简单的事情？

Answer 1

这确实与另一个库发生了冲突。调试起来令人震惊，我最终使用 Allan Jardine 的 Visual Event 书签http://www.sprymedia.co.uk/article/Visual+Event 相对简单地得到了它。谢谢艾伦，你救了我的培根。

Answer 2

尝试将 preventDefault 添加到您的点击事件中，并更改为使用 delegate 绑定样式：

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