-1

我正在使用 jQuery 的单击将单击绑定到具有类 coda-nav-left-arrow 的动态添加的 div。

$('#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() 深入多个级别，并且仅在文档准备好时才有效。

4

5 回答 5

3

您确定已将处理程序附加到#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>
于 2012-11-11T00:09:48.927 回答
2

尝试这个：

$(document).on('click', '.coda-nav-left-arrow', function () {
    alert(countClicks);
});
于 2012-11-10T23:50:16.320 回答
2

你的代码很好

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

...检查这个小提琴。

代表团不仅影响到直系子女，还影响到所有下层。您可能有另一个 js 或语法错误会破坏此特定代码（但如果没有链接很难说）

于 2012-11-11T00:53:02.977 回答
1

您需要选择要委托给的父元素。您需要选择一个确实存在的元素。如果有父母，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/

于 2012-11-10T23:57:23.860 回答
1 
<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");
  });
});

小提琴

于 2012-11-11T18:11:42.877 回答