附加到列表视图的项目不可点击

Question

当我在jQuery Mobile中向listview添加内容时,它们在单击时不会触发click事件.在下面的示例中,"凯迪拉克"无法点击.难道我做错了什么？

HTML:

<div data-role="page" id="p1">
    <ul data-role="listview" data-theme="b">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
    </ul>
</div> 

jQuery的:

$('li').on('click',function(){
    alert('clicked');            
});

$('ul').append('<li><a href="#">Cadillac</a></li>');
$('ul').listview('refresh');

js问题的答案

Answer 1

尝试将您的代码更改为此

$('ul').on('click', 'li', function(){   # <-- That's the trick
    alert('clicked');            
});

$('ul').append('<li><a href="#">Cadillac</a></li>');
$('ul').listview('refresh');

编辑:在这种情况下,即使DOM发生变化,on函数也会自动绑定click到li列表中的每个元素.因此,您可以随时添加列表项.所有这些都将具有click事件绑定.

使用live具有几乎相同功能的旧jQuery方法是一个坏主意,因为它具有非常缓慢的性能.