Question

我正在尝试创建一个嵌套列表。点击<li>时，无序列表应附加到点击的<li>上。

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

这是我的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

这是一种方式。我不确定它是否正是你所需要的。

您可以将事件处理委派给.container，并检查一些条件以查看<li>是否适合附加新列表。在我的示例中，只有在点击的<li>尚未容纳<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。

Answer 2

我需要你的帮助。

JS with JQuery

var addNestedListItem = function(ev) {
    var html = '<ul><li>Click to add a nested list item</li></ul>';
    $(ev.target).parent().append(html);
    $('li').off('click').on('click', addNestedListItem);
};
$('li').on('click', addNestedListItem);

HTML

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

jsfiddle：http://jsfiddle.net/vfb8yare/

Answer 3

感谢Mike'Pomax'Kamermans指出我原始代码中的缺陷。

以下是我要找的JavaScript：

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

    $(e.target).append(html);
});

单击<li> <li> </li>时在<li>下添加列表

3 个答案: