Question

我正在使用嵌套列表构建待办事项列表。列表项使用“把手”模板附加到其各自的无序列表。每个列表项都包含一个文本输入以在浏览器中表示它们，空的<ul></ul>标签用于任何将来的子列表项，以及一个用于添加这些列表项的按钮。这有效，并且文本输入正确显示在DOM中。但是，当我尝试通过<li></li>检索主列表之外的新添加的e.target元素时，尽管所有子列表都出现在DOM中，但在子列表中未检测到任何东西。

在代码中，我有一个绑定到按钮的事件处理程序，该事件处理程序为每个列表添加了一个新的列表项。在这种情况下，e.target是按钮。我的目标是在新项目的输入上使用jQuery的.focus()，以便光标在显示时就已经在那里。我已经在console.log()中使用jQuery和香草JS方法进行了遍历树的测试，遍历了按钮的同级<ul></ul>，但是遍历方法似乎没有问题，因为列表始终记录，尽管为空。

在这种情况下，主列表上存在一项。随后，通过“新列表项”按钮的事件处理程序功能将一个项添加到第一子列表（其本身位于第一项的<li></li>标记内）。在该函数内部，我遍历树以访问列表项的子无序列表，并将结果记录到控制台，如下所示：

console.log(e.target.closest('li').querySelector('ul'));

返回的结果表明该列表为空：

<ul id="list-2" class="parent-list">
        </ul>

但是，新添加的列表项在DOM中清晰可见：

<ul id="list-2" class="parent-list">
   <li data-id="...">...</li>
 </ul>

相关的HTML脚本，包括带有把手模板的脚本：

<body>
    <label><input type="checkbox" id="toggle-all-checkbox">Toggle All</label>
    <br>
    <button class="add-parent-list-todo">+</button>
    <br>
    <ul id="list-1" class="parent-list">
    </ul>
</body>
<script id="todo-list-template" type="text/x-handlebars-template">
    {{#this}}
    <li {{#if completed}} class="completed" {{/if}} data-id="{{id}}">
        <input class="todo-input" type="text" value="{{text}}">
        <div id='options'>
            <button class="delete">x</button>
            <input type="checkbox">
        </div>
        <br>
        <button class="add-parent-list-todo">+</button>
        <br>
        <ul id="{{childList}}" class="parent-list">
        </ul>
    </li>
    {{/this}}
</script>

有问题的事件处理函数：

        enterTodoText: function (e) {
            var parentList = $(e.target).next().next().attr('id');

            this.todos.push({
                text: '',
                id: util.uuid(),
                completed: false,
                parentList: parentList,
                childList: "list-" + childListId
            });

            childListId++;
            this.render();
            $(e.target).next().next().children('li:last-child').find('.todo-input').focus();
            console.log(e.target.closest('li').querySelector('ul'))
        }

非常感谢任何人可能提供的任何见识。

Answer 1

我已经意识到，这很可能与e.target在Handlebars模板中有关。使用模板中的e.target，我似乎无法遍历模板本身。通过使用console.log($(e.target).parents())进行测试得到了证实，该测试表明对于子列表，可检测到的最高父级是<li>（这是模板中的父级元素），而我希望它是<html> 。

我想到的解决方案是，以$('body')作为起点而不是$('e.target')来遍历树。

通过e.target检索的元素与DOM中显示的元素之间存在差异

1 个答案: