javascript - 附加后 onclick 无法正常工作

Question

在我的代码中，我正在动态创建无序列表项。其中每一个都包含一个文本和一个 anchor 标记(红十字标志)。现在我想要的是，在单击 anchor 标记时，它会打印它所在的列表项的子编号。我想要这个而不需要重新加载页面。

 if (status === 'success') {
     const i = document.createElement("i");
     i.classList.add("fa");
     i.classList.add("fa-times");
     i.classList.add('red-cross');

     const a = document.createElement("a");
     a.classList.add("ml-4");
     a.append(i);

     const t = document.createTextNode(txt)

     const newItem = document.createElement("li");
     newItem.append(t);
     newItem.append(a);

     $("ul#"+list).append(newItem).on('click', 'li a', function() {
         const cnt =  $("ul#"+list).children().length;
         console.log(cnt);
     }); }

查看: Unordered list of items with text and cross sign

预期输出:单击我的叉号时，输出应为 i。

当前输出:无论我点击哪个数字叉号，输出始终为 6。

Answer 1

点击功能只有在您点击链接后才会运行。所以 const cnt = $("ul#"+list).children().length; 在你点击之前不会被计算，我猜你所有的项目都在那个时候被添加了因此所有这些的结果都是 6。

要使用该方法，您必须在创建函数时调用计算，如下所示:

$("ul#"+list).append(newItem).on('click', 'li a', (function() {
    const cnt =  $("ul#"+list).children().length;

    return function () {
        console.log(cnt);
    }
}()));

但这不是一个好的解决方案，因为您为每个添加的项目添加了一个新的事件监听器。你可能更喜欢这样的东西:

var list = $("ul#test");
list.on('click', 'li a', function () {
    var idx = list.children().index($(this).closest('li'));
  console.log(idx);
});

这只需要做一次，然后只需添加新项目:

$("ul#test").append(newItem);