Question

我确定这是一个简单的问题，但我似乎无法弄明白。我有一些引导标签，锚点是标签。我有一个信息，但当我试图抓住被点击的锚点时，我得到一个未定义的。这是我的代码。

<ul class="nav nav-tabs" role="tablist" id="steps_view">
  <li class="active"><a href="#" data-selection="step_all">All</a></li>
  <li><a href="#" data-selection="step_completed">Completed</a></li>
  <li><a href="#" data-selection="step_na">N/A</a></li>
</ul>


  $(document).on('click','#steps_view',function(e){
    e.preventDefault();

＆＃39; **不应该$（这）指向被点击的链接？我也试过$（e）但没有去

    var selection = $(this).attr('data-selection');

    console.log(selection);

    $('#steps_view li').removeClass('active');

    $('#'+selection).parent('li').addClass('active');
  });

感谢大家的帮助！

Answer 1

在您的事件处理程序中，$(this)引用您指定给它的元素 - #steps_view，它不是锚点，而是包含它的<ul>。使您的选择器更具体：

$(document).on('click','#steps_view > li > a',function(e){

Answer 2

尝试e.target。

在delegated event处理程序（您正在使用）中，this引用与传递给.on()的选择器匹配的元素，在您的情况下为#steps_view 。当您单击其中一个锚点时，click事件会冒出DOM树：首先，事件触发锚元素，然后触发锚点的父元素，依此类推，直到根目录{ {1}}。

当事件到达document时 - 通过document绑定事件处理程序 - jQuery查看目标元素（$(document).on(...)）并将其与您传递的选择器进行比较到e.target。选择器不匹配，因此它尝试目标元素的父级（.on()）。如果失败，它将移至li的父级li。由于这与选择器匹配，因此jQuery调用您的事件处理函数并将ul#steps_view元素分配给ul#steps_view。 this正是因为这个原因而存在的：所以你可以确定最初导致事件发生的元素。

有关详细信息，请参阅jQuery Event Object reference。

快速提示：如果您在Chrome开发者工具的“来源”标签中设置了断点，则可以检查事件对象的属性以找到您要查找的内容。

如何引用使用jquery时单击的链接

2 个答案: