[英]Button click not firing in modal window (Bootstrap)
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(). 我已经读过按钮点击在模态窗口中被吞下,为了防止这种情况,请使用event.preventDefault()。 But that's not working.
但那不起作用。 I can't capture the click event of this button.
我无法捕获此按钮的click事件。
What else am I missing? 我还缺少什么?
Any tips are greatly appreciated! 任何提示都非常感谢!
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. 我相当确定上述3种方法中的一种可以解决您的问题。 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.
事件处理程序不起作用的原因是因为在评估事件处理程序时,submit_btn元素不存在。 The above 3 handlers I gave you will work on a submit_btn element that exists now and in the future .
我给你的上述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中吗?
This works for me: 这对我有用:
$(document).on("click", "#submit_btn", function(event){
alert("GO");
});
Here is how I did with class( .copy-text
). 这是我对类(
.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>
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! 你的代码应该工作!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.