jQuery没有检测到动态插入元素的点击 [英] jQuery not detecting clicks on dynamically inserted element

问题描述

我有以下模式：

 < div class =modal fadeid =myModaltabindex = -1role =dialogaria-labelledby =myModalLabelaria-hidden =true> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header> 
< h4 id =mtclass =modal-titleid =myModalLabel>< / h4> 
< / div> 
< div id =mbclass =modal-body> 
< / div> 
< div id =mfclass =modal-footer> 
< / div> 
< / div> 
< / div> 
  

表，它启动了jquery ajax调用，并引入模式的标题，正文和页脚。您可以在下面看到该脚本。

 < script> 
 $（document）.ready（function（）{
 $ b $（'a.btn'）。click（function（）{
 var org_id = $（this）。 attr（'org_id'）; 
 $ .ajax（{
 type：'post'，
 url：'/ groups /'+ org_id +'/ leave'，
成功：data（data）{
 var data = $（'< div>）。html（data）; 
 var msg1 = data.find（'＃msg1'）; 
 var msg2 = data.find（'＃msg2'）; 
 var msg3 = data.find（'＃msg3'）; 
 $（'＃mf'）。html（msg3）; 
 $（'＃mt'）。html（msg2）; 
 $（'＃mb'）。html（msg1）; 
} 
}）; 
}）; 
 $ b $（'＃killgroup'）。click（function（）{
 alert（'made it'）; 
}）; 
}）; 
< / script> 
  

一旦模式完全填充数据，页脚部分如下所示：

 < div id =mfclass =modal-footer>< div id =msg3>< a id =killgroupclass =btn btn-danger>我是正面的。 Kill Group Forever。< / a>< a data-dismiss =modalclass =btn btn-success>等待！让我重新考虑这一点。< / a>< / div>< / div> 
  

我遇到的问题是当我点击带有ID的按钮时，killgroup ，它什么也没做。如果您在上面查看我的jquery代码，第二部分试图对该按钮做出反应：

  $（'＃killgroup' ）.click（function（）{
 alert（'made it'）; 
}）; 
  

}）;

我无法得到那工作。似乎在鸡蛋问题发生之前可能会有一只鸡出现，但我对jquery / javascript非常陌生，所以我不确定。基本上，我希望能够点击动态创建的按钮并启动另一个jquery脚本。

  $（'＃killgroup'）。click（function（）{...}）; 
  

...说找到一个id 'killgroup' code>在代码运行时存在 ，然后为该元素分配一个点击处理程序。

在你的情况当然该元素尚不存在。使其工作的两种常用方法是将 .click（）调用移动到创建元素的代码之后（在您的Ajax回调中）或使用委托单击处理程序绑定到当前存在的父元素（或者如果没有父元素，则绑定到文档）：

$ b'$

  $（'。modal-content'）。on（'click'，'#killgroup'，function（）{
 alert（'made it' ）; 
}）; 
  

.on（）方法会将处理程序绑定到jQuery对象中的元素 - 在这种情况下，使用'。modal-content'，因为您知道在开始时存在 - 然后当发生点击时jQuery自动测试点击是否发生在匹配的元素的子元素中第二个参数<？c $ c>'＃killgroup'中的选择器。

I have the following modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <h4 id="mt" class="modal-title" id="myModalLabel"></h4>
        </div>
        <div id="mb" class="modal-body">
        </div>
        <div id="mf" class="modal-footer">
        </div>
    </div>
</div>

I have a button in a table, which kicks off a jquery ajax call and pulls in the title, body, and footer of the modal. You can see that script below.

<script>
$(document).ready(function(){

$('a.btn').click(function(){
    var org_id = $(this).attr('org_id');
    $.ajax({
        type: 'post',
        url: '/groups/' + org_id + '/leave',
        success: function(data){       
            var data = $('<div>').html(data);
            var msg1 = data.find('#msg1');
            var msg2 = data.find('#msg2');
            var msg3 = data.find('#msg3');
            $('#mf').html(msg3);
            $('#mt').html(msg2);
            $('#mb').html(msg1);
        }
    });
});

$('#killgroup').click(function(){
    alert('made it');
    });
});
</script>

Once the modal is fully populated with data, the footer section looks like this:

<div id="mf" class="modal-footer"><div id="msg3"><a id="killgroup" class="btn btn-danger">I'm Positive. Kill Group Forever.</a><a data-dismiss="modal" class="btn btn-success">Wait! Let me re-think this.</a></div></div>

The problem that i'm having is that when I click the button with the id, "killgroup", it does nothing. If you look above at my jquery code, the second section tries to react to that button click:

$('#killgroup').click(function(){
alert('made it');
});

});

I cannot get that to work. It seems as though there might be a chicken before the egg issue going on here but I am very new to jquery / javascript so I am not sure. Basically, I want to be able to click that dynamically created button and kick off another jquery script.

解决方案

The code:

$('#killgroup').click(function(){ ... });

...says to find an element with id 'killgroup' which exists at the moment that code runs and then assign a click handler to that element.

In your case of course the element doesn't exist yet. The two usual ways to make it work are to either move the .click() call to just after the code that creates the element (in your Ajax callback) or to use a delegated click handler bound to a parent element that does exist at the time (or bound to the document if there is no parent element):

$('.modal-content').on('click', '#killgroup', function() {
   alert('made it');
});

That variation of the .on() method will bind the handler to the element(s) in the jQuery object - in this case I've used '.modal-content' because you know that exists at the start - and then when a click occurs jQuery automatically tests whether the click originated in a child of that element that matches the selector in the second argument, '#killgroup'.

这篇关于jQuery没有检测到动态插入元素的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！