Question

我有一系列嵌套的UL，如下所示：

<ul class="categorySelect" id="">
  <li class="selected">Root<span class='catID'>1</span>
    <ul class="" id="">
      <li>First Cat<span class='catID'>2</span>
        <ul class="" id="">
          <li>cat in First<span class='catID'>3</span>
            <ul class="" id="">
            </ul>
          </li>
          <li>another cat in first<span class='catID'>4</span>
            <ul class="" id="">
            </ul>
          </li>
        </ul>
      </li>
      <li>cat in root<span class='catID'>5</span>
        <ul class="" id="">
        </ul>
      </li>
    </ul>
  </li>
</ul>

然后我有jQuery，我打算将"selected"类移到click()上的不同LI：

$(document).ready(function () {

    $("ul.categorySelect li").click(function () {
        $("ul.categorySelect li.selected").removeClass("selected");
        $(this).addClass("selected");
    })

});

当我对此进行测试时，起初它似乎根本不起作用。我在click事件函数中添加了alert("click")并且我能够告诉它它正在工作，但是在子LI和父LI上都注册了click事件，这意味着最终根LI总是最终被选中

有没有办法防止{LI}在父LI上执行？

Answer 1

使用event.stopPropagation();该链接提供了一个例子。

如何防止jQuery事件冒泡到父元素？

1 个答案: