Question

点击<li data-link-url="...">元素时，我遇到了jquery和.click（）函数的问题，该元素共享 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>

当我点击 li-tag 并使用“... / templateB.html”时，我会被重定向到“... / templateA.html “即可。所以我调试了整个事情并记录了 $（this）变量。当我点击“... / templateB.html”时，输出为：

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

好像，.click（）函数第二次运行。

如何只选择templateB或阻止点击功能再次运行？

P.S。：我希望我的问题是可以理解的。英语不是我的主要语言。

Answer 1

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

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

特定属性的jquery .click（）函数，返回多个元素

1 个答案: