模态窗口中的按钮点击无法触发（Bootstrap）

Question

我在一个模态窗口里有一个按钮：

<button id="submit_btn" class="btn btn-link">Send the invitation</button>

我正试图捕获点击事件：

$('#submit_btn').click(function(event){
    event.preventDefault();
    alert( "GO" ); 
});

我看到在模态窗口中按钮点击事件被吞噬了，为了防止这种情况发生，需要使用event.preventDefault()。但这并没有起作用，我无法捕获到按钮的点击事件。

我还错过了什么？

非常感谢任何提示！

- fumeng

---

打开控制台并尝试触发事件...检查它是否有效...如果有效，则可能是“z-index”问题。 - Sushanth --

打开控制台，看看是否有任何Javascript错误。这对我来说似乎很好用。 - Suthan Bala

我创建了一个可用的jsfiddle - http://jsfiddle.net/GqD4f/8/ /edit 你的方法应该是可行的，这里有一个可用的jsfiddle - http://jsfiddle.net/CR3bM/1/ - 你是否没有将事件处理程序放在DOM准备好的位置？ - Ross

是的，我没有将我的事件处理程序放在DOM准备好的位置。我忘记了这一点。但是，我尝试在模态窗口的“shown”事件处理程序中使用它，但并没有起作用。 - fumeng

Answer 1

尝试这个 -

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

或者这个 -

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

如果您正在使用较旧版本的jQuery，则可能需要使用live方法。

Live方法（仅在必要时使用）

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

我相信以上三种方法之一可以解决你的问题。你的事件处理程序无法正常工作的原因是在评估事件处理程序时，你的submit_btn元素不存在。我提供给你的上述三个处理程序将适用于现在和未来存在的submit_btn元素。

/编辑

这是一个有效的jsfiddle - http://jsfiddle.net/GqD4f/8/

/另一个编辑

我使用了你在帖子中提到的方法制作了一个jsfiddle，它可以正常工作 - http://jsfiddle.net/CR3bM/1/

你没有将事件处理程序放在DOM ready中吗？

- Ross

---

从v1.7.x开始，Yes live已被弃用，并在v1.9中删除。如果他使用的是1.4.2之前的版本，他将需要使用live。与使用delegate或on方法相比，它的性能也较慢- http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ - Ross

我正在使用jQuery 1.9.1。谢谢你的答案！ - fumeng

不，我没有把事件处理程序放在DOM准备好的位置。那是我的糟糕决定。 - fumeng

为什么要在 $(document) 下面？ - Axel

Answer 2

这对我有效：

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

- Bartolomevs V

Answer 3

我使用类(.copy-text)来实现以下操作：

Javascript:

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

模态框 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>

- Muhammad Shahzad

Answer 4

我刚刚遇到了这个问题。

由于某种原因，如果你将

  $(document).on("click","span.editComment",function(event) {

在这些中的一个内部：

 $(document).ready(function() {

然后由于某些奇怪的原因，它无法捕获点击事件。只需删除周围的文档准备即可：

 $(document).ready(function() {}

你的代码应该能够正常工作！

- Jonathan Laliberte