jQuery，动态访问动态目标答案

【问题标题】：jQuery, Dynamic on | accessing dynamic targetsjQuery，动态访问动态目标
【发布时间】：2016-01-06 08:16:48
【问题描述】：

jQuery.fn.on 与动态选择器一起使用时如何访问动态目标？

因为$(this) 在绑定函数中提供父元素。而且我需要让每个元素本身动态获取对应的data-attributes。

小提琴： https://jsfiddle.net/u1kuufj7/1/

HTML：

<div id="container">
  <div id="1" class="ch">Click</div><br>
  <div id="2" class="ch">Click</div><br>
  <div id="3" class="ch">Click</div><br>
  <div id="4" class="ch">Click</div><br>
  <div id="5" class="ch">Click</div><br>
</div>

Javascript：

var $container = $('#container');
var $chs = $('.ch');

$container.on('click', $chs, function() {
    alert($(this).attr('id'));
});

【问题讨论】：

究竟是什么问题？
$(this) 在 binder 函数中给出的是父元素，而不是事件实际绑定的子元素。我需要绑定函数中的孩子。
注意：现在，Stack Snippets（<> 按钮）应该比 jsFiddle 更受欢迎，因为它们在现场。

标签： javascript jquery jquery-on

【解决方案1】：

要使用事件委托，on 的第二个参数应该是一个选择器（一个字符串），而不是一个 jQuery 对象：

var $container = $('#container');
var $chs = '.ch';                   // <== Changed

$container.on('click', $chs, function() {
    alert($(this).attr('id'));
});

现在，this 将引用被点击的.ch。

实例：

var $container = $('#container');
var $chs = '.ch';

$container.on('click', $chs, function() {
    alert($(this).attr('id'));
});

<div id="container">
  <div id="1" class="ch">Click</div><br>
  <div id="2" class="ch">Click</div><br>
  <div id="3" class="ch">Click</div><br>
  <div id="4" class="ch">Click</div><br>
  <div id="5" class="ch">Click</div><br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

旁注：$(this).attr("id") 只是写this.id 的一段很长的路。

旁注 2：虽然id 值以数字开头是完全有效的，但它们在 CSS 中使用起来很尴尬，因为 ID 选择器不能以文字数字开头。（有一些方法可以绕过它，通过转义或通过属性选择器，但这很尴尬。）因此，我通常避免ids 以数字开头。

【讨论】：

示例仅用于镜像实际功能 :-P 。显然 NO $(this).attr("id") 和 numberic ids 都没有。我只是复制粘贴并更改为几个属性

【解决方案2】：

使用，您将 jQuery 对象传递给 .on()

var $container = $('#container');
$container.on('click', '.ch', function() {
    alert($(this).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="container">
  <div id="1" class="ch">Click</div><br>
  <div id="2" class="ch">Click</div><br>
  <div id="3" class="ch">Click</div><br>
  <div id="4" class="ch">Click</div><br>
  <div id="5" class="ch">Click</div><br>
</div>

【讨论】：