javascript - 动态绑定点击事件到列表

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

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