Question

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

HTML

<ul id="users" class="grid">
    <li>
        <figure>
            <img src="image source" alt="Title" />
            <figcaption>
                <div>
                    <h3>Title</h3>
                    <ol>
                        <li> <span>Additional Button</span> </li>
                        <li> <span>Additional Button</span> </li>
                        <li> <span>Additional Button</span> </li>
                    </ol>
                </div>
            </figcaption>
        </figure>
    </li>
</ul>

这是JS

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

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

第一个绑定没有问题，但第二个绑定从未被调用。有没有人知道如何让这个工作。请记住，LI元素都是动态创建的。

Answer 1

如果您的所有li元素都是动态创建的（ul.grid＆gt; li和ol＆gt; li），则每次创建.grid ol > li元素时都必须分配到ol的点击处理程序在.grid>li。

另一种方法是尝试改变：

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

为：

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

P.S。如果您动态创建元素，则在创建元素时添加处理程序（如果允许应用程序逻辑）。

Answer 2

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

示例：

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

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

Answer 3

您的选择器无效，请将其更改为以下内容：

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

动态绑定click事件到列表

3 个答案: