How to add a callback function to the addClass method of jQuery?

Question

I'm using Prettify from Google and Markdown and I want each time I find a pre code added in the markdown textarea to call again the prettyPrint() function.

This is my actual code:

if($('#wmd-preview').length > 0) {
  $('#wmd-preview').on('DOMNodeInserted DOMNodeRemoved',function(){
    $(this).find("pre").not('.prettyprint').addClass("prettyprint");
  });
}

But I want something like:

$(this).find("pre").not('.prettyprint').addClass("prettyprint",function(){
  prettyPrint();
});

Is there any possible way to achieve this?

Epimenides

What would the callback do? When should it be called? – Canonical

You can see the second example. The callback will call the function prettyPrint() which add style to the code inserted in the markdown preview. It should be called each time is found a new pre element without a prettyprint css class. I don't want to call it each time is rased the domnodeinserted or domnoderemoved events, but only in the case described above. – Epimenides

There is no callback for addClass. Are you saying that you want to run prettyPrint after each single pre got a prettyprint class? – Tache

@MateiMihai You could overwrite the addClass function with your own that will fire a custom event (but that won't help here, so...) – Canonical

It should be called each time is found a new pre element without a prettyprint Do you mean that it should happen when new pre element is added to a DOM? – Tache

@FAngel yep. That's what he wants. – Canonical

@FAngel I know there is no callback for addClass. yes, I want to run it after each pre element found without a prettyprint class, but after I'm adding it that class – Epimenides

Answer 1

As far as I understand, you need this:

$(this).find("pre").not('.prettyprint').each(function(){
   $(this).addClass("prettyprint");
   prettyPrint();
})

Tache

Answer 2

You could extend .addClass() jquery's method to let it accept a callback function:

;(function ($) {
    var oAddClass = $.fn.addClass;
    $.fn.addClass = function () {
        for (var i in arguments) {
            var arg = arguments[i];
            if ( !! (arg && arg.constructor && arg.call && arg.apply)) {
                setTimeout(arg.bind(this));
                delete arguments[i];
            }
        }
        return oAddClass.apply(this, arguments);
    }

})(jQuery);

Then use it as usual:

 $('pre:not(.prettyprint)').addClass('prettyprint',prettyPrint);

Auspice

This is great, except that it adds .prettyprint after the callback is executed. Callbacks are supposed to be fired after the core event has completed (such as with fadeIn()). – Subkingdom

@jacob Updated it to push callback in event queue and to set relevant callback context, thx! – Auspice

Answer 3

The addClass jQuery function doesn't have a callback in arguments.

Read more about this in documentation.

I think that this sould work for you:

// prettyprint class is added
$(this).find("pre").not('.prettyprint').addClass("prettyprint");
// after prettyprint class is added, prettyPrint function is called
prettyPrint();

Chihuahua

Thank you but I don't want to use this solution because the prettyPrint() function will be called each time you type any charachter in the markdown container, which is not what I want.. – Epimenides