jquery function not working after switching from grid to list

Question

I've a website which contains a switching jQuery function from grid to list. In another external .js file there is the following function

$(function (){
$('.image a img').hover(
function () {
     $(this).stop().fadeTo('slow', 0.7);
     },
function(){
    $(this).stop().fadeTo('slow', 1);
}
);
});

which is working only the first time. If i'm switching from "grid" to "list" or viceversa, it doesn't work anymore.

In the google developer tool the inline style disappear after switching. Is there any easy solution to "reload" the function above?

Answer 1

The problem is you don't reset the queue. So if you mouse over/ mouse out fast. It will show nothing. Try this:

$('body').on("mouseenter", ".image a img", function () {
     $(this).stop(true, false).fadeTo('slow', 0.7);
   })
.on("mouseleave", ".image a img", function(){
    $(this).stop(true, false).fadeTo('slow', 1);
});

Which will reset the queue, but not jump to the end. Also, you can use the LIVE element to keep the event alive on all items which change. Which is on in the new jQuery since 1.8