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

Question

当我在 jQuery Mobile 中将内容添加到我的列表视图时，它们在单击时不会触发单击事件。在下面的示例中，“凯迪拉克”不可点击。难道我做错了什么？

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');

jsFiddle的问题

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因此，您可以随时添加列表项。它们都将具有单击事件绑定。

使用具有几乎相同功能的旧livejQuery 方法是一个坏主意，因为它的性能非常低。

Answer 2

在编译 javascript 时，li 不存在，因此处理程序未应用在其上，您需要将其委托给当时存在的元素。

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

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

或者您可以使用live(), 或delegate(), 但on()在性能方面是最好的

​<a href="http://jsfiddle.net/88NHA/1/" rel="nofollow">工作小提琴

Answer 3

现在正在工作，请参阅此编辑

$('ul').append(
    $('<li>').append(
        $('<a>').attr('href','#').append('Cadillac'
)));

Answer 4