如何知道哪个子元素被单击

Question

我仍在学习 jquery，我想知道是否有办法检查该.alphabetdiv 内的哪个元素被单击。这是正确的方法吗？

$(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() {&nbsp; console.log($(this).attr('id'));})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="alphabet">&nbsp; <a id="a">a</a>&nbsp; <a id="b">b</a>&nbsp; <a id="c">c</a>&nbsp; <a id="d">d</a></div>

Answer 2

jQuerychildren()返回选择器的所有子级。在您的上下文中，您将获得所有链接，而不是单击的链接。这是一个演示：$(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>另一个想法是使用事件目标：$(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元素或其子元素是动态生成的，否则事件委托可能没有必要。您可以将事件处理程序直接绑定到链接元素，如下所示：$('.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>

Answer 3

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