jQuery 按钮单击未在模态窗口中触发（Bootstrap）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17455906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button click not firing in modal window (Bootstrap)
提问by fumeng
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.
我已经读过按钮点击会在模态窗口中被吞下，为了防止这种情况，请使用 event.preventDefault()。但这行不通。我无法捕获此按钮的点击事件。
What else am I missing?
我还缺少什么？
Any tips are greatly appreciated!
非常感谢任何提示！
回答by Ross
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.
如果您使用的是旧版本的 jQuery，则可能必须改用 live 方法。
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.
我相当确定上述 3 种方法之一将解决您的问题。您的事件处理程序不起作用的原因是因为在评估您的事件处理程序时您的 submit_btn 元素不存在。我给您的上述 3 个处理程序将处理现在和将来存在的 submit_btn 元素。
/edit
/编辑
Here is a jsfiddle that works - http://jsfiddle.net/GqD4f/8/
这是一个有效的 jsfiddle - 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/
我使用您在帖子中使用的方法制作了一个 jsfiddle 并且它有效 - http://jsfiddle.net/CR3bM/1/
Are you not putting your event handler in DOM ready?
你没有准备好将事件处理程序放入 DOM 中吗？
回答by Bartolomeo V
This works for me:
这对我有用：
$(document).on("click", "#submit_btn", function(event){
alert("GO");
});
回答by Muhammad Shahzad
Here is how I did with class(.copy-text).
这是我对 class( .copy-text) 的处理方式。
Javascript:
Javascript：
$(document).on('click', '.copy-text', function(){
console.log($(this));
});
Modal html:
模态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>
回答by Jonathan Laliberte
I had this problem just now.
我刚才有这个问题。
For some reason if you wrap
出于某种原因，如果你包装
$(document).on("click","span.editComment",function(event) {
within one of these:
在其中之一：
$(document).ready(function() {
Then it doesn't catch the click for some weird reason. Just remove the surrounding document ready:
然后由于某种奇怪的原因它没有捕捉到点击。只需删除准备好的周围文件：
$(document).ready(function() {}
And your code should work!
你的代码应该可以工作！
