Question

I have a message board, and I have some code that loads new messages automatically as they arrive.
I have, addtionally, the following code run on all board posts.

$(".old_post").hover(function(){
            $(".post_right_nav", this).show();
            $(this).css({
                'background-color': '#E6E6E6'
            });
        }, function(){
            var cssObj = {
                'background-color': '',
                'font-weight': ''
            }
            $(this).css(cssObj);
            $(".post_right_nav", this).hide();
        });

All the new posts don’t get this hover effect, even though they belong to the same class.
In addtion, while all the posts that are NOT loaded via AJAX have the following div:

<div id="id_number" class="old_post" style="">

the new posts have

<div id="id_number" class="old_post" style="display: block;">

the function that generates the posts on the server-side the the same.

Any help on this? (How can I get the AJAX-ed posts to have a onHover effect?)

Answer 1

You must use live to bind an event (docs here). Unfortunately live doesn’t support hover so you have to split your code and define mouseover and mouseout event handlers.

$(".old_post").live('mouseover', function() {
    $(".post_right_nav", this).show();
    $(this).css({
        'background-color': '#E6E6E6'
    });
});

$(".old_post").live('mouseout', function(){
    var cssObj = {
        'background-color': '',
        'font-weight': ''
    }
    $(this).css(cssObj);
    $(".post_right_nav", this).hide();
});