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

当我在jQuery Mobile的listview中添加内容时，它们在点击时不会触发点击事件。在下面的例子中，'凯迪拉克'是不可点击的。难道我做错了什么？附加到列表视图的项目是不可点击的

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

来源

2012-09-09 Timm

试图改变你的代码，这

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

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

编辑：在这种情况下即使DOM发生变化，函数也会自动将click绑定到列表中的每个li元素。所以你可以随时添加列表项。他们都将有点击事件绑定。

使用旧的live功能几乎相同的jQuery方法是一个糟糕的主意，因为它的性能非常低下。

来源

2012-09-09 11:25:43

+1： - ]回答比我快......也许你应该添加一些解释这个“上”语法（替换“活”功能） – gotqn

我想'$（ “礼”）上（“点击” ..'是一回事这种微妙的东西会引起这么多的问题 – Timm

@Timm，请注意，他用不同的语法 - ？！该功能将所有当前渲染的元素，并结合每一个新的。这是与旧的“活”的功能。 – gotqn

截至JavaScript的编译时间，李不存在，hense处理程序不应用它，你需要把它委托给它当时在场的元素..

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

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

或者你可以使用live()，或delegate()，但on()是最好的性能代价

Working Fiddle

来源

2012-09-09 11:26:15

现在正在看this Edit

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

来源

2012-09-09 12:07:38 Sender

如果工作正常，请标记为答复。 – Sender

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

在简单的话：绑定点击事件上#p1.ul（是的，不是li），但检查的li接收到事件以及浮上ul之前，只有执行的处理程序。

我想你仔细了解4操作数/ PARAMS这里，ESP＃1 &＃3

对象（）你绑定到$('#p1.ul')。
jQuery立即评估该表达式并将该函数绑定到所有生成的元素，因此它仅绑定执行此语句时的DOM中可用的元素。要为click
选择绑定事件的源'li'
需要注意的是，该事件不必直接，它结合太ul触发
事件，它可以是任何其后代是谁接收事件，这个事件然后bubbles向上，直到它覆盖所有的祖先或是stopped from propagating。所有元素在将其冒泡到其父项之前可能会或可能不会执行事件处理程序。现在，一旦事件bubbles到'ul'元素，这是必然，执行事件处理程序进行检查，对于任何其后代作出之前，该事件是由冒泡，选择'li'相匹配，只有在事件处理程序执行并冒泡（除非停止），否则只是冒泡。
事件处理方法

所以呢？当处理绑定到将在运行时生成的元素时，您需要正确选择＃1 &＃3。＃1应该是这样将存活，你所预期的事件，是一个祖先，你要处理的事件，也应该是在树中尽可能少的所有元素（一个或多个）的寿命的因素（选择更高的元件将导致性能下降，因为较高的顺序，数目较多的后代，更事件将被鼓泡到它，这将最终被丢弃由于＃3不匹配，更不用说甚至触发其他的可能性li不适用于）。在你的情况下，#p1.ul不会被销毁，直到页面存在，并且所有li都是它的后代，因此是＃1的候选人。如果您ul也是在运行时产生的，您可能需要选择一个要素上涨的元素树，body可以选择作为最后的手段。＃3将是你真正想要处理事件的元素的选择器，这个选择通常很明显，但很容易放到＃1而不是＃3。

当你直接绑定到li click事件将只绑定到现有li元素，而不是这种结合语句的执行后产生的。

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

来源

2012-09-09 12:53:13

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

回答

相关问题