jquery，仅单击当前 li

Question

一旦点击它，我想将一个 ul 元素附加到一个 li 元素。

我的 html 如下：

<ul>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3
        <ul>
            <li>list 31</li>
            <li>list 32</li>
            <li>list 33</li>
        </ul>
    </li>
    <li>list 4</li>
    <li>list 5</li>
</ul>

还有我的javascript：

$('ul').on('click', 'li', function (){
    $(this).append(
        '<ul>'+
            '<li>list a</li>'+
            '<li>list b</li>'+
            '<li>list c</li>'+
        '</ul>'
    )
});

我的问题是当我单击一个 li 而不是将元素附加到当前 li 时，它会将其附加到同一范围内的所有 li。

jsfiddle：https://jsfiddle.net/malamine_kebe/Lneyn80w/

Answer 1

您必须停止在 DOM 树中冒泡的事件，

$(document).ready(function(e) {
  $('ul').on('click', 'li', function(e) {
    e.stopPropagation();
    $(this).append(
      '<ul>' +
      '<li>list a</li>' +
      '<li>list b</li>' +
      '<li>list c</li>' +
      '</ul>'
    );
  });
});

DEMO