javascript - 在由 innerHTML 生成的标签上触发 jQuery 事件

Question

我使用 JavaScript 循环为列表创建 HTML 代码，示例:

if (thisList.length > 0) {
    var myList = "";
    for (var i = 0; i < thisList.length; i++) {
        myList += '<li>Item ' + i + '</li>';
    }

    var myListBox = document.getElementById('my-list').innerHTML = myList;
}

然后我使用以下方法插入 HTML 代码:

<ul id="my-list" ></ul>

因此呈现的 HTML 将类似于:

<ul id="my-list" >
    <li>Item 0</li>
    <li>Item 1</li>
</ul>

我的问题:我无法在 ul#my-list 内的标签上触发 jQuery 事件。例如，以下 jQuery 代码对 li 标签没有影响。

$(document).ready(function(){
    $('li').click(function() {
        $(this).hide();
});

如何在这些标签上触发 jQuery 事件？提前致谢。

Answer 1

问题是你的绑定(bind)函数是在元素渲染之前发生的，所以jquery没有什么可以绑定(bind)的。您需要一种更好的方法，例如检查何时从 my-list 节点单击 li。

如果你看

$(document).ready(function(){
    $('li') //this will have length 0 since the elements are not in the DOM tree yet.
});

您正在寻找https://api.jquery.com/on/

$(function(){
    $('#my-list').on('click', 'li',function() {
        $(this).hide();
    });
});

$(function(){}) 是 $(document).ready

的简写