Jquery content's mouseover not display after contents load again

Question

I created a (right)side bar for display all new post (like facebook). Now If user mouse over any post, It's fade in a new box to display full post (like facebook).

This side bar get all new posts by a ajax request after 5 second interval. And this below code I used for mouseover to display full post.

$(".upbox1").mouseover(function() {
var id = $(this).attr('id').replace('','');
$("#menu").fadeIn("slow");
$('.loader2').show();
    $.get("uphover?id="+id, function(data) {
        $('#menu').empty().html(data);
        $('.loader2').hide();
    });
});

After load the page 1st time the mouseover display well but just 5 second interval when side post reload again mouseover cannot display anything.

How to solved it please?

All script placed in same file: my side bar's update script:

    var uid = '<? echo $session->id; ?>';

    function addside(type, msg){
    //Do something for display all new post in side bar.
    }

    function waitFormailno(){
        $.ajax({
            type: "GET",
            url: "updateside.php",
            cache: false,
            async : false,
            dataType : 'json',
            data: "uid="+ uid,
            timeout:15000, 
            success: function(data){ 
                addside("MyDivId", data);
                setTimeout(waitFormailno, 15000);
            },
            error: function(){
                setTimeout(waitFormailno, 15000); 
            }
        });
    }

$(document).ready(function(){
    waitFormailno();
});

You should be using `.on()`: http://stackoverflow.com/questions/10082031/why-use-jquery-on-instead-of-click — Tom Walters, Mar 17 '15 at 17:38
I tried it also many way but I cannot understand how to implement it right way here. But I am trying again with your above link. Thank u sir. — koc, Mar 17 '15 at 17:43

score 1 · Accepted Answer · answered Mar 17 '15 at 17:46

You need to use the .on() syntax:

$('body').on('mouseover', '.upbox1', function() {
    var id = $(this).attr('id').replace('','');
    $("#menu").fadeIn("slow");

    $('.loader2').show();
    $.get("uphover?id="+id, function(data) {
        $('#menu').empty().html(data);
        $('.loader2').hide();
    });
});

You can replace body with #sidebar (replace as appropriate) if the sidebar never changes.

Jquery content's mouseover not display after contents load again

1 Answers1