Javascript onclick不'；安装后不能正常工作

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

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

视图：

预期产出： 单击i的叉号时，输出应为i

电流输出： 无论单击哪个数字，输出总是6

预期输出：单击i时，交叉符号输出应为i

当前输出：无论单击哪个数字，输出总是6

如果单击i-th

li

应输出i（li的索引）或n（li的总数），则应执行以下操作

const children =  $("ul#"+list + " li a").children();
const i = children.index(this) + 1 // +1 to count from 1
console.log(i);

---

这将检查单击的a位于哪个位置，并且由于每个

只有一个

，因此计数是相同的。

单击功能在单击链接之前不会运行。因此，

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

---

您是否使用

var

关键字声明

list

。const被隔离到每个回调作用域。