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

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 of the issue

Answer 1

尝试将您的代码更改为此

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

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

编辑：在这种情况下，on 函数会自动将 click 绑定到列表中的每个 li 元素，即使 DOM 发生变化也是如此。因此，您可以随时添加列表项。它们都将具有单击事件绑定。

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

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() 是最好的性能方面

​Working Fiddle

Answer 3

现在工作见this Edit

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

Answer 4

$('#p1.ul').on('click', 'li' ,function(){
  //Do your stuff
});

简单来说：绑定到#p1.ul 上的点击事件（是的，不是li），但在冒泡到ul 之前检查li 是否也收到了事件，然后才执行处理程序。

我希望您仔细了解这里的 4 个操作数/参数，尤其是 #1 和 #3

1. 您绑定到$('#p1.ul')的对象。
   jQuery 立即计算这个表达式并将函数绑定到所有结果元素，因此 它只绑定到执行该语句时 DOM 中可用的元素。

2. 要为click绑定的事件

3. 事件源的选择器'li'
   注意，事件也不需要直接在它绑定的ul上触发，它可以是它的任何接收事件的后代，这个事件然后bubbles向上直到它覆盖所有祖先或者是stopped from propagating。在将事件处理程序冒泡到其父级之前，所有元素可能会也可能不会执行事件处理程序。现在，一旦事件 bubbles 到它所绑定的 'ul' 元素，在执行事件处理程序之前，会检查它的任何后代，事件是从中冒泡的，仅匹配选择器 'li'然后事件处理程序被执行并冒泡（除非停止），否则只是冒泡。

4. 事件处理方法

所以？ 在处理将在运行时生成的元素的绑定时，您需要正确选择#1 & #3。 #1 应该是这样的元素，它可以在您期望事件的生命周期中存活，并且是您要为其处理事件的所有元素的祖先，也应该在树中尽可能低尽可能（选择更高的元素会导致性能下降，因为阶数越高，后代的数量越多，就会冒泡更多的事件，最终会由于#3不匹配而被丢弃，而不是提到甚至触发其他不打算用于的li 的可能性）。在您的情况下，#p1.ul 在页面存在之前不会被销毁，并且所有li 都将是它的后代，因此是#1 的候选者。如果你的ul也是在运行时生成的，你可能需要在元素树中选择一个更高的元素，body可以作为最后的选择。 #3 将是您实际要为其处理事件的元素的选择器，这种选择通常很明显，但很容易将其用于 #1 而不是 #3。

当您直接绑定到li 的点击事件时，它只会绑定到现有的li 元素，而不是执行此绑定语句后生成的元素。

More about $.on & Example of binding to dynamic elements