如何知道点击了哪个子元素

Question

我还在学习 jquery，我想知道是否有办法检查.alphabet div 中的哪个元素被点击了。 这是正确的做法吗？

$(document).on("click", ".alphabet", function() { 

 var id = $(this).children().attr('id');
  console.log(id); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

谢谢

Answer 1

为<a> 标签添加点击事件。

$('a').on("click", function() {
  console.log($(this).attr('id'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

Answer 2

jQuery 的children() 返回选择器的所有子项。在您的上下文中，您将获得所有链接，而不是单击的链接。这是一个演示：

$(document).on("click", ".alphabet", function() {
  let $children = $(this).children();
  $children.each((k, item) => console.log(item.id));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

一个想法是定位<a>标签而不是<div>：

$(document).on("click", ".alphabet a", function() {
  console.log(this.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

另一个想法是使用event target：

$(document).on("click", ".alphabet", function(e) {
  console.log(e.target.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

最后，除非.alphabet 元素或其子元素是动态生成的，否则event delegation 可能没有必要。您可以将事件处理程序直接绑定到链接元素，如下所示：

$('.alphabet a').on("click", function(e) {
  console.log(this.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

另见Event binding on dynamically created elements?

Answer 3

不，这是不正确的。您将事件侦听器添加到主div，因此当您单击此div 时将触发事件，无论您单击哪个子元素。如果要确定目标，则需要为每个子元素添加侦听器。