Question

我在点击时使用jQuery将点击绑定到动态添加的div，使用类coda-nav-left-arrow。

$('#slider-wrap').on('click', '.coda-nav-left-arrow', function () {
    alert(countClicks);
});

问题是，这个生成的div是另一个生成的div的子节点，所以它不是直接位于＃slider-wrap div下面：

<div id="slider-wrap">
  <div id="slider-id-wrapper" class="coda-slider-wrapper arrows">
    <div class="coda-nav-left-arrow">

这就是为什么（我认为）jQuery无法识别它。我的假设是否正确？我怎样才能看到它？

编辑：为了清楚起见，＃slider-wrap div从一开始就存在。这不是动态生成的。其他一切都是。

Edit2（已解决）：这足以让代码正常工作：

$('.coda-nav-left-arrow').on('click',function(){});

只要它包含在

中

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

块。

编辑3：因此，我们了解到.on（）深入多层次，只有在文档准备就绪时才有效。

Answer 1

您确定已将处理程序附加到#slider-wrap，当它在DOM中时？

尝试换行jQuery.ready：

jQuery(function($) {
    $('#slider-wrap').on('click', '.coda-nav-left-arrow', function () {
        alert(countClicks);
    });
});

或者在创建div后添加脚本代码：

<div id="slider-wrap">
  <div id="slider-id-wrapper" class="coda-slider-wrapper arrows">
    <div class="coda-nav-left-arrow">
    ....
  ....
</div> <!-- end of #slider-wrap -->
<script type="text/javascript">
    $('#slider-wrap').on('click', '.coda-nav-left-arrow', function () {
        alert(countClicks);
    });
</script>

Answer 2

试试这个：

$(document).on('click', '.coda-nav-left-arrow', function () {
    alert(countClicks);
});

Answer 3

你的代码非常好

$(document).ready(function(){
    $('#slider-wrap').on('click', '.coda-nav-left-arrow', function () {
        alert(countClicks);
    });
});

... check this fiddle。

该代表团不仅对直系儿童有影响，而且对所有低级儿童都有影响。你可能有另外的js或语法错误打破了这个特定的代码（但没有链接很难说）

Answer 4

您需要选择要委派的父元素。您需要选择确实存在的元素。如果body有父母，请尽量不要document或#slider-wrap。

我建议的替代方案是在动态创建元素时附加事件，如：

var $sliderWrap = $('<div id="slider-wrap">{YOUR OTHER HTML HERE}</div>');
$sliderWrap.on('click', '.coda-nav-left-arrow',function(){
  alert(countClicks);
});
$sliderWrap.appendTo('body');

我还建议阅读事件委托，以便了解jQuery在幕后做了什么。这不是太复杂：

http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/

Answer 5

<button class="btn">Do Something</button>

$('.btn').on('click', function() {
  $('body').prepend($('<button>').attr('id', 'foo').html('I\'m a foo doer'));
  return $('#foo').on('click', function() {
    return alert("Foo thing");
  });
});

FIDDLE

点击时jQuery无法识别child-div

5 个答案: