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

Answer 2

I would try something like this"

$( '.image a img' ).on({
     mouseenter: function() {

        $( this ).stop().fadeTo('slow', 0.7);

      },
      mouseleave: function() {

        $( this ).stop().fadeTo('slow', 1);

     }
   });

Answer 3

To be sure i'd have to see more code, but perhaps the reason is that the quoted function binds .hover event to all elements matching the query $('.image a img') in the binding moment (which is on document ready event), so if you add new elements later (edit: which, I'm guessing, your switching function does?), even matching the query $('.image a img') .hover will not be defined for them. Switch to $(.image container').on("mouseenter mouseleave",'.image a img', handlerInOut), where .image container is an element in which .image a img are, and see if it helps.