Javascript 将单击事件动态绑定到列表

因此，我正在创建一个动态添加内容的网站，并希望将点击事件绑定到列表项。问题是我在列表项中有一个列表项，而第二个列表项似乎无法工作

HTML

---

第一个绑定可以正常工作，但第二个绑定永远不会被调用。有没有人知道如何让它发挥作用。请记住，

LI

元素都是动态创建的。

您的选择器不工作，请将其更改为类似以下内容：

$('ol li').on("click", "li", function(e) {
    console.log($(this));
});

---

您的选择器不工作，请将其更改为以下内容：

$('ol li').on("click", "li", function(e) {
    console.log($(this));
});

---

如果所有

li

元素都是动态创建的，（ul.grid>li和ol>li），则每次在

.grid>li

中创建

ol

元素时，都必须将单击处理程序分配给

.grid>li

另一种方法是尝试从以下方面进行更改：

$('.grid ol').on("click", "li", function(e) {
    console.log($(this));
});

致：

---

另外，如果动态创建元素，则在创建元素时向元素添加处理程序（如果允许应用程序逻辑）。

如果所有

li

元素都是动态创建的，（ul.grid>li和ol>li）然后，每次在

.grid>li

中创建

ol

元素时，都必须为

.grid>li

分配单击处理程序

另一种方法是尝试从以下方面进行更改：

$('.grid ol').on("click", "li", function(e) {
    console.log($(this));
});

致：

---

另外，如果动态创建元素，则在创建元素时向元素添加处理程序（如果允许应用程序逻辑）。

在动态内容上执行事件的简单规则是在最近的外部父级上应用绑定事件，而该外部父级不是动态生成的

例如：

$('.grid').on('click', 'ol>li', function(e){ 
    console.log($(this)); 
});

---

基本上只需在非动态创建的父对象上绑定事件，并在.on（）上下文中操纵选择器。

在动态内容上执行事件的简单规则是在最接近的非动态生成的外部父对象上应用绑定事件

例如：

$('.grid').on('click', 'ol>li', function(e){ 
    console.log($(this)); 
});

---

基本上，只需在未动态创建的父对象上绑定事件，并在.on（）上下文中操纵选择器。

因为此代码在两个位置运行，一个用于用户，另一个用于游戏。。。我把它们弄混了。。。现在应该修复。哪些

li

元素是动态的，您有两组

li

（外部或内部）。它们都是动态生成的。另一个是主容器，内部容器是在外部容器的基础上生成的。可能有3个内部代码，甚至可能有5个，因为此代码在两个位置运行，一个用于用户，一个用于游戏。。。我把它们弄混了。。。现在应该修复。哪些

li

元素是动态的，您有两组

li

（外部或内部）。它们都是动态生成的。另一个是主容器，内部容器是在外部容器的基础上生成的。可能有3个内部处理程序，甚至可能有5个，在创建元素时添加处理程序是不需要的。这非常有效，只是我不得不将它从

li>ol>li

更改为

ol>li

在创建元素时添加处理程序是不需要的。这非常有效，除了我必须把它从

li>ol>li

改为

ol>li