Question

我有以下模式：

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

我在表格中有一个按钮，它启动了一个jquery ajax调用并拉入模态的标题，正文和页脚。您可以在下面看到该脚本。

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

模态完全填充数据后，页脚部分如下所示：

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

我遇到的问题是当我点击带有id的按钮时，＆＃34; killgroup＆＃34;，它什么也没做。如果你看看我的jquery代码，第二部分会尝试对该按钮点击做出反应：

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

}）;

我无法让它发挥作用。似乎在鸡蛋问题发生之前可能会有一只鸡，但我对jquery / javascript很新，所以我不确定。基本上，我希望能够单击该动态创建的按钮并启动另一个jquery脚本。

Answer 1

代码：

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

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

在你的情况下，元素当然还不存在。使它工作的两种常用方法是将.click()调用移到刚创建元素的代码之后（在Ajax回调中），或者使用绑定到父元素的委托单击处理程序。时间（如果没有父元素，则绑定到document）：

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

.on() method的变体会将处理程序绑定到jQuery对象中的元素 - 在这种情况下我使用'.modal-content'因为你知道它在开始时存在 - 然后当发生单击时，jQuery会自动测试单击是否源自该元素的子元素，该子元素与第二个参数'#killgroup'中的选择器匹配。

Answer 2

只需对动态加载的元素使用.on（）函数......

问题是你是为一个不存在的元素分配一个点击处理程序。

这将解决您的问题.....

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

它曾经是.live（）函数，但已被弃用。 .on（）应该做的伎俩

jQuery没有检测动态插入元素的点击

2 个答案: