动态绑定click事件到列表

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> li和ol> li），则每次在.grid>li创建ol元素时，都必须分配.grid ol > li单击处理程序。

另一种方法是尝试改变：

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

至：

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

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

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