JQuery Event Manager + Child Targeting Help

Question

I show a bunch of messages from users on the page. I have a main parent div with the class name "posts", and each post is displayed in a div with the class name "row" inside it. So there are a lot of div.row inside div.posts. Everyone looks like this.

<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>

Using CSS, the action column is set to display: none by default. When the user hovers over the message (div.row), I want to show the action column. My original way to do this was by installing a mouseover even for every line, and that was reflected in the browser and slowed down. I did some research and came across a delegation of events and decided to give it a try. While I can determine which row is targeted, however, I cannot figure out how to target the child-div to the column class of the class.

The code is still ...

$(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

You can use live:

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

As noted in the documentation:

"" , ( ).

:

• , $(window).load(). , $(document).ready()
• jQuery $('.posts') , ( ) - 1 jQuery.
• , , div.row HTML, 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. .

Answer 2

, , jQuery 1.5 "", . , , . ( "hover" "toggle()" mouseenter/mouseleave + show()/hide().)

http://api.jquery.com/delegate/

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

jQuery 1.5 :

$(".posts").delegate("div.row", "hover", function(){
    $(this).find("div.actions-column").toggle();
});

:

http://jsfiddle.net/SM6Jv/

Answer 3

jQuery live(). , .

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

Answer 4

:

$('div.actions-column', $row).show(); // .hide()

UPDATE:

jQuery ([expr]):

var $tgt = $(e.target);
var $row = $tgt.closest('.row');

:

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;           
}

Answer 5

Try:

$row.find (".actions-column").hide ();

$row.find (".actions-column").show();

Answer 6

jQuery, , , - CSS:

div.row:hover div.actions-column { display:block; }