jQuery加载事件

I have a page with dynamic content from PHP and I want to use jQuery's load function to periodically refresh the div container which contains the dynamic content so that new content is displayed on top of the old content.

I using a jQuery function as follows:

setInterval(function() {                         
    $("#ContentWrapper").load("Livefeed.php #ContentWrapper");
}, 10000);

to refresh the content container's wrapper every 10 seconds

My problem is that after the load function is executed. Click events and hover events do no properly work on the page. Initially they did not fire at all so I used Jquery live function on all click and hover events within the content wrapper and it solved the problem.

However, when the page reloads the hovers reload as well and all hidden divs with are made visible by jQuery's .show method hide. Is there any way to prevent the hover from reloading and also for the visible hidden divs to remain visible every time the .load function is called.

I'm using click and hover functions like so:

$('selector').live("click",function(){
});

and

$('selector').live("hover",function(){
});

Any help is appreciated.

Using jQuery.live is deprecated now. So don't use it. Use jQuery.on from now on. Also, .hover event is being taken down. You should use separate mouseenter and mouseleave events.

You can fix this issue by replacing .live with:

/*
If click happens inside contentwrapper, check if click target was yourSelector, if true execute this function
*/
    $("#ContentWrapper").on("click", "#yourSelector", function(){
     //do whatever u wanna do on click
    });

To keep track of all divs that were hidden and all those weren't you need to set unique id for each div. And before you reload with .load() you loop through all divs and save their current state (hidden or visible) in an Object Array in [{ id : state },..] format. Once ajax request finishes, loop through Object array via $.map and set states for each div

You can use JQuery delegate,its primary intention is dynamically driven content:

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

 $("#Parent").delegate("selector","click", function() { });