javascript - 单击 <li> 时在 <li> 下添加一个列表

Question

我正在尝试创建一个嵌套列表。当点击<li>时应将无序列表附加到 <li>被点击了。

点击第一个<li>后我的代码失败并且不会将列表附加到新插入的 <li> 。我想将无序列表添加到任何 <li>就在列表中。

这是一个 fiddle :http://jsfiddle.net/s9204kyh/

这是我的 JavaScript:

$('li').on('click', function() {
    var html = '<ul><li>Click to add a nested list item</li></ul>';

    $(this).append(html);
});

这是我的 HTML:

<div class="container">
    <ul>
        <li class="click">Click to add a nested list item</li>
    </ul>
</div>

Answer 1

这是一种方法。我不确定这是否正是您所需要的。

您可以将事件处理委托(delegate)给 .container ，并检查一些条件以查看 <li> 是否适合附加新列表。在我的示例中，仅当单击 <li> 时才会附加新列表。尚未容器 a <ul>标签。

JS(jQuery):

var html = '<ul><li>Click to add a nested list item</li></ul>';

$('.container').on('click', 'li', function(e) {
    $(e.target).filter(':not(:has(ul))').append(html);
});

这是一个fiddle .