Question

I have a button that already has an onclick-event and an assigned function. I wish to add another function call in front of it. I can imagine it should be possible to fiddle around with the onclick attribute (attr), but I do not think this is best practice.

What would you consider best practice to prepend a function call on an existing onclick-event?

Answer 1

If you are not afraid to mess with the guts of jQuery:

// "prepend event" functionality as a jQuery plugin
$.fn.extend({
  prependEvent: function (event, handler) {
    return this.each(function () {
      var events = $(this).data("events"), 
          currentHandler;

      if (events && events[event].length > 0) {
        currentHandler = events[event][0].handler;
        events[event][0].handler = function () {
          handler.apply(this, arguments);
          currentHandler.apply(this, arguments);
        }      
      }
    });
  }
});

$("#someElement").prependEvent("click", function () {
    whatever();
});​

See it live: http://jsfiddle.net/Tomalak/JtY7H/1/

Note that there must already be a currentHandler or the function will not do anything.

Disclaimer: I consider this a hack. It depends on jQuery internals that might change in the next version of the library. It works now (I tested jQuery 1.7.2), but don’t be surprised if it breaks with a future version of jQuery.