javascript - jquery，仅点击当前li

Question

单击它后，我想将 ul 元素 append 到 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 而不是将元素 append 到当前 li 时，它会将其 append 到同一范围内的所有 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