jQuery事件委派+儿童目标帮助

Question

我在页面上显示来自用户的一堆帖子.我有一个主要的父div,类名为'posts',每个帖子都输入一个div,里面有类名'row'.所以在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.我最初的做法是通过为每一行设置一个鼠标悬停,这会对浏览器产生影响并减慢速度.我做了一些研究,偶然发现了事件授权,并决定尝试一下.到目前为止,我能够确定哪一行是目标,但是,我无法弄清楚如何使用类'actions-column'来定位它的child-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

    });

});

Answer 1

你可以使用live:

$('div.row').live('mouseover', function() {
    $(this).find('div.actions-column').show();
}).live('mouseout', function() {
    $(this).find('div.actions-column').hide();
});

正如文档说明:

绑定"实时"事件时,它将绑定到页面上的所有当前和未来元素(使用事件委派).

还有几点说明:

• 我看到你正在使用这个$(window).load()活动.你可能想要$(document).ready()
• 你应该利用jQuery的链接功能,而不是查询$('.posts')两次,你可以在最后添加第二个调用(就像我在上面的例子中所做的那样) - 这样做效率更高,是对1个选择器做多个事情的首选方式在jQuery中.
• 您尝试编写以查找div.rowHTML树的下一个代码的代码已经由jQuery的closest()方法实现.

你可以用它做这样的事情:

$('div.posts').hover(function(e) {
    var row = $(e.target).closest('div.row');
    $row.find('div.actions-column').show();
}, function(e) {
    var row = $(e.target).closest('div.row');
    $row.find('div.actions-column').hide();
});

但由于live我在上面展示的功能,这不是必需的.

• 考虑一下查询的效率.如果您只有一个<div>帖子类,请考虑给它一个id属性.这是迄今为止在文档中选择元素的最有效方法,将它赋予仅出现一次的元素是有意义的.
• 每当您按类查询元素时,最好在类之前包含标记名称(当然,除非您希望它在许多不同的标记中) - 所以不要寻找.row,而是养成寻找的习惯div.row代替.它只是更快.