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

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

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

使用具有几乎相同功能的旧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），但检查li是否也收到了此事件，然后才冒泡到ul，然后才执行处理程序。

我希望您仔细了解这里的4个操作数/参数，特别是＃1＆amp; ＃3

您绑定到$('#p1.ul')的对象 jQuery立即计算此表达式并将函数绑定到所有结果元素，因此它仅绑定到执行此语句时DOM中可用的元素。
要为click
事件来源'li'的选择器
请注意，事件不需要直接在它绑定的ul上触发，它可以是接收事件的任何后代，此事件然后bubbles向上直到它覆盖所有祖先或者是stopped from propagating。所有元素在将其冒泡到父级之前可能会也可能不会执行事件处理程序。现在，一旦事件bubbles到它所绑定的'ul'元素，在执行事件处理程序之前，对其任何后代进行检查，事件是来自冒泡的，匹配选择器{ {1}}，只有事件处理程序被执行并冒泡（除非停止），否则只需冒泡。
事件处理程序方法

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

当您直接绑定到body的click事件时，它将仅绑定到现有的li元素，而不是绑定执行此绑定语句后生成的元素。

More about $.on＆amp; Example of binding to dynamic elements

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

4 个答案: