Question

This is my first attempt to write a jQuery plugin, this one is supposed to fade out the body, switch class, then make the body reappear and let the user switch class back. Unfortunately at this point it can’t switch class more than once. How to fix it?

(function($) {

    $.fn.flashClass= function(classId, element){

        element="body"; //overriden for testing purpose
            $(this).click(function() {
                $(element).fadeOut("slow", function() {
                    $(element).toggleClass(classId);
                });
                $(element).fadeIn("slow", function() {
                    $(element).scrollTop(height);
                });
            });
    };
})(jQuery);

EDIT:

At the end of the day, It turned out that I’ve pasted the wrong snippet with scrollTop callback of undefined variable height. After removing it and switching .click to .on , function works like a charm. However I am still interested why it worked only once.

Answer 1

Try the live() or on(), like following :

 $(this).on('click',function() {...

Instead of

 $(this).click(function() {...