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

dynamically bind click event to list

本文关键字：列表 动态绑定 事件 单击      更新时间：2023-09-26

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

.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元素都是动态创建的。

如果所有li元素都是动态创建的，（ul.grid>li 和 ol>li），那么每次在 .grid>li 中创建元素时，都必须分配要.grid ol > li的单击处理程序ol。

另一种方法是尝试从以下位置更改：

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

自：

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

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

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

例：

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

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

您的选择器不起作用，请将其更改为如下所示的内容：

$('ol li').on("click", "li", function(e) {
    console.log($(this));
});
相关文章：