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>'
    );
  });
});

jquery，单击当前的li

1 个答案:

DEMO