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

Question

所以我正在创建一个动态添加内容的网站，我想将点击事件绑定(bind)到列表项。问题是我在一个列表项中有一个列表项，但我似乎无法让第二个列表项工作。

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

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

Answer 1

如果您所有的 li 元素都是动态创建的(ul.grid>li 和 ol>li)，那么您必须将点击处理程序分配给 .grid ol > li每次在 .grid>li 中创建 ol 元素时。

另一种方法是尝试改变:

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

到:

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

附言如果您动态创建元素，则在创建元素时向它们添加处理程序(如果允许应用程序逻辑)。