jQuery 事件委托 + 儿童定位帮助
我在页面上显示了一堆用户的帖子。 我有一个类名为“posts”的主父 div，每个帖子都输出在一个类名为“row”的 div 中。 所以 div.posts 中有很多 div.row。 每个看起来都是这样的。
<div class="row clearfix">
<div class="left-column">
<img src="..." title="" />
</div>
<div class="main-column">
<div class="row-text">Post Text...</div>
<div class="row-date">Posted Date...</div>
</div>
<div class="actions-column">
<a href="#">Link</a>
<a href="#">Link 2</a>
<a href="#">Link 3 etc.</a>
</div>
</div>
通过 CSS，actions-column 默认设置为 display:none。 当用户鼠标悬停在帖子（div.row）上时，我想显示操作列。 我最初的做法是为每一行设置鼠标悬停，这会对浏览器造成影响并减慢速度。 我做了一些研究，偶然发现了事件委托，并决定尝试一下。 到目前为止，我能够确定目标是哪一行，但是，我无法弄清楚如何使用“actions-column”类来定位它的子 div。
到目前为止的代码...
$(window).load(function(){
$('.posts').mouseover(function(e){
var $row, $tgt = $(e.target);
if ($tgt.hasClass("row")) {
$row = $tgt;
} else {
if ($tgt.parent().parent().hasClass('row'))
$row = $tgt.parent().parent();
else if ($tgt.parent().hasClass('row'))
$row = tgt.parent();
else
return false;
}
//code here to select div.actions-column and show it
});
$('.posts').mouseover(function(e){
var $row, $tgt = $(e.target);
if ($tgt.hasClass("row")) {
$row = $tgt;
} else {
if ($tgt.parent().parent().hasClass('row'))
$row = $tgt.parent().parent();
else if ($tgt.parent().hasClass('row'))
$row = tgt.parent();
else
return false;
}
//code here to select div.actions-column and hide it
});
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我意识到这个问题已经得到了解答，但由于 jQuery 1.5 添加了一个显式的“委托”方法，现在这可能是一个更好的解决方案。 由于该主题会出现在搜索中，因此我将这个答案发布给其他搜索它的人。 （我还通过使用“hover”和“toggle()”而不是 mouseenter/mouseleave + show()/hide() 进行重构，以进一步简洁。）
http://api.jquery.com/delegate/
可以写成：
查看实际操作：
http://jsfiddle.net/SM6Jv/
I realize this has already been answered, but since jQuery 1.5 adds an explicit "delegate" method, that might be a better solution now. Since this thread will come up in searches, I post this answer for other people searching for it. (I also refactor for further conciseness by using "hover" and "toggle()" instead of mouseenter/mouseleave + show()/hide().)
http://api.jquery.com/delegate/
with jQuery 1.5 or higher could be written as:
See it in action:
http://jsfiddle.net/SM6Jv/
尝试使用 jQuery 的
live()方法。 它在内部使用事件委托来执行其操作，因此您甚至不必考虑正确设置事件委托。Try using jQuery's
live()method. It uses event delegation internally to perform its actions so you won't even have to think about setting up event delegation properly.尝试：
并且
Try:
And
?:
更新：
最好使用 jQuery 最接近([expr])< /a>：
而不是：
?:
UPDATE:
It is better to use jQuery closest([expr]):
instead of:
除非你真的想用 jQuery 来做到这一点，否则当然可以用一行 CSS 来管理某些东西：
Unless you really wanted to do this with jQuery then of course something can be managed with a line of CSS:
您可以使用
live：如文档所述：
更多注意事项：
$(window).load()事件。 您可能想要$(document).ready()$('.posts')两次，您只需附加最后的第二次调用（就像我在上面的示例中所做的那样） - 这是更高效的方法，也是在 jQuery 中对 1 个选择器执行多项操作的首选方法。div.row的代码已由 jQuery 的closest()方法。您可以用它做这样的事情：
但这不是必需的，因为我上面展示了
live功能。，请考虑为其指定 id 属性。 这是迄今为止在文档中选择元素的最有效方法，并且将其赋予仅出现一次的元素是有意义的。.row，养成查找div.row的习惯。 它只是更快。You could use
live:As the documentation notes:
A couple more notes:
$(window).load()event. You probably want$(document).ready()$('.posts')twice, you can just append the second call at the end (like I did in my example above) - this is much more efficient and the preferred way of doing multiple things to 1 selector in jQuery.div.rowup the HTML tree has already been implemented by jQuery'sclosest()method.You could do something like this with it:
But this is not necessary because of the
livefunctionality I showed above.<div>with a class of posts, consider giving it an id attribute. This is by far the most efficient method of selecting elements in a document, and it makes sense to give it to elements that only occur once..row, make a habit of looking fordiv.rowinstead. It's just faster.