Question

I am currently using a jQuery plugin that is applying a GreyScale hover effect. The plugin works perfectly.

The page the plugin is on utilises ajax based filtering. Because of this the below code only works correctly on the initial load. I need to be able to reinitialise both elements on each filter.

I having been experimenting with $(document).on as I’m using jQuery 1.7.2 but cannot get this working..

$(function() {
    // fade in the grayscaled images to avoid visual jump
    $('.colour img').hide().fadeIn(1000);
  });

  // user window.load to ensure images have been loaded
  $(window).load(function () {
    $('.colour img').greyScale({
      // call the plugin with non-defult fadeTime (default: 400ms)
      fadeTime: 500,
      reverse: false
    });
  });

Answer 1

Can’t you just put it in a function, call that function in document ready and then call it again after your ajax call? Something like:

function YourFunction() {
    $('.colour img').greyScale({
    // call the plugin with non-defult fadeTime (default: 400ms)
       fadeTime: 500,
      reverse: false
    });
}

Then call it on document ready like:

$(function () {
    YourFunction();
});

Then in the callback for your AJAX call just call YourFunction() again?