Jquery .click()函数在特定属性上，返回多个元素

jquery .click() function on specific attribute, returns multiple elements

本文关键字：返回 元素 属性 click 函数 Jquery      更新时间：2023-09-26

我有一个问题与jquery和.click()函数，当点击一个<li data-link-url="...">元素，共享data-link-url属性。

这是我的HTML结构: 
<nav class="fullListHover">
  <ul>
    <li class="oneHub">
      <a href="... /suppliers/technology.html"></a>
      <ul>
        <li data-link-url="... /templateA.html">
          <ul>
            <li data-link-url="... /templateB.html"></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>       
</nav>

这是jquery的click()函数

<script type="text/javascript">
  $("[data-link-url]").click(function(){
      window.location.href=$(this).attr("data-link-url")
  });
</script>

当我点击标签与"…/templateB.html"我得到重定向到"…/templateA.html"。所以我调试了整个过程，并记录了$(this)变量。当我点击"…/templateB.html"时，输出是:

.../templateB.html
.../templateA.html

看起来，.click()函数会运行第二次。

如何只选择templatb或防止点击功能运行第二次?

注:我希望我的问题是可以理解的。英语不是我的母语。

您的问题是因为您嵌套了具有data-link-url属性的li元素，因此在事件冒泡DOM时，为层次结构中的每个元素调用一次单击处理程序。要解决这个问题，在事件处理程序中调用stopPropagation():

$("[data-link-url]").click(function(e) {
    e.stopPropagation();
    window.location.href = $(this).data('link-url');
});
相关文章：