在innerHTML生成的标记上触发jQuery事件

时间:2015-04-17 19:42:39

标签: javascript jquery html

我正在使用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事件?提前谢谢。

2 个答案:

答案 0 :(得分:5)

问题是你的绑定函数是在渲染元素之前发生的,所以jquery没有任何东西需要绑定。您需要一种更好的方法,例如检查从列表节点单击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

的简写

答案 1 :(得分:3)

这是因为在 document.ready 时,您的DOM未完成 - 您正在运行时更改它。以这种方式修改您的代码:

var myListBox = document.getElementById('my-list').innerHTML = myList;
$('li', myListBox ).click(function() {
    $(this).hide();

现在,在您创建DOM之后,函数onClick将绑定。