jQuery，动态上|访问动态目标

Question

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

因为$(this)是在binder函数中给父元素。我需要让每个元素本身动态获取相应的 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 选择器不能以文字数字开头。（有一些方法可以解决它，通过转义或通过属性选择器，但这很尴尬。）出于这个原因，我通常避免 ids 以数字开头。

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>

jQuery，动态上|访问动态目标

jQuery, Dynamic on | accessing dynamic targets

javascript

jquery

jquery-on