Question

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

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

我正在尝试捕获点击：

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

我已经读过按钮点击在模态窗口中被吞下，为了防止这种情况，请使用event.preventDefault（）。但那不起作用。我无法捕获此按钮的click事件。

我还缺少什么？

非常感谢任何提示！

Answer 1

试试这个 -

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

或者这个 -

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

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

实时方法（仅在必要时使用此方法）

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

我很确定上述3种方法中的一种可以解决您的问题。事件处理程序不起作用的原因是因为在评估事件处理程序时，submit_btn元素不存在。我给你的上述3个处理程序将处理现在存在的submit_btn元素和将来。

/编辑

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

/另一个编辑

我使用您在帖子中使用的方法制作了一个jsfiddle并且它有效 - http://jsfiddle.net/CR3bM/1/

你没有把你的事件处理程序放在DOM中吗？

Answer 2

这对我有用：

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

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>
        </di>
    </di>

Answer 4

我刚才遇到了这个问题。

出于某种原因，如果你换行

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

其中一个：

 $(document).ready(function() {

然后由于一些奇怪的原因它没有抓住点击。只需删除周围的文档：

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

你的代码应该可行！

按钮单击不在模态窗口中触发（Bootstrap）

4 个答案: