jQuery，动态访问动态目标

Question

在使用动态选择器时，如何访问动态目标？

因为$(this)在绑定函数中给出了父元素。我需要让每个元素本身动态地获取相应的data-attributes。

Fiddle: 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'));
});

Answer 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选择器不能以文字数字开头。(可以通过转义或属性选择器来绕过它，但这是很尴尬的。)因此，我通常避免以数字开头的id。

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

​