我有一个<div>s 列表,它们具有相同的html,但html内的值不同。层次结构如下:
<div>
<div id="element"> <div class="likecomm"> <a class="commenticon" href="#">...some value according to the returning value...</a> </div> </div> <div id="element"> <div class="likecomm"> <a class="commenticon" href="#">...some value according to the returning value...</a> </div> </div>
在一个事件中,我将html注入列表的顶部,这是另一个 <div id="element> ... </div>
<div id="element> ... </div>
我具有以下用于单击评论图标的事件处理程序;
$('.commenticon').click(function(){ $(this).closest('.actionframe').next('nav').slideToggle(300); return false; });
在插入新的之前,它可以正常工作<div id="element> ... </div>。评论图标的点击事件处理程序不匹配。我搜索了这个问题,所有人都说.delegate()应该使用。
.delegate()
我的问题是我不知道在哪里使用委托函数。之前,我从ajax获得结果以注入<div id="element> ... </div>,我.delegate()在注入html的ajax调用中使用了函数。
$.ajax({ success:function(data) { var html=... // the necessary div html binded with data // prepend function call() $('.likecomm').delegate(".commenticon","click" , function() { $(this).closest('.actionframe').next('nav').slideToggle(300); return false; }); } });
目前,它不起作用。那么,有什么想法可以使这件事起作用吗?
您需要将事件处理程序绑定到应在其上触发事件的元素的公共祖先。例如,如果您#element将追加内div具有id的parent:
#element
div
id
parent
$("#parent").delegate(".commenticon", "click", function() { //Do stuff });
这将适用于这样的HTML结构:
<div id="parent"> <div class="element"> </div> <div class="element"> </div> </div>
之所以起作用,是因为DOM事件从它们的起源点冒出来。该delegate方法在祖先元素处捕获事件,并检查事件是否起源于与选择器匹配的元素。
delegate
另请注意,id在同一文档中具有重复值是无效的。在这里,我将您的elementID值改为了类名。
element
最后,如果您使用的是jQuery 1.7+,则应改用该on方法。它将具有相同的效果,但是请注意,前两个参数是相反的:
on
$("#parent").on("click", ".commenticon", function() { //Do stuff };