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