JS event handlers. Creating nice CSS button with jquery and integrating with jquery.validate and/or jquery.form

Question

So, i'm writing a plugin using js with jQuery, that will replace all buttons (input type=submit and <button>) on my site's pages with nice buttons that look something like <a href='#'><span class='label'>Ok</span><i></i></span>

At the very beginning i ran into trouble: some of my buttons don't just submit the form - some are hooked with jquery.validation plug-in, some are used to do ajax calls.

So the first idea was to save all click handlers associated with the original button (input type=submit) somewhere and then hook them to the new button (<a href...). But I haven't found a way to get references to the click handlers, so here's the first question:

Is there a way to get references to all event handlers, associated with an element?

The second intention was to hide original button instead of replacing it with a new one and emulate a click on it when a user presses the hyperlink on a new one. This idea was ruined on the stage of implementing. When i use $(myButtonSelector).click(), the form gets submitted, ignoring the jquery.validation click handlers, associated with it. $(myButtonSelector).trigger('click') works the same way - the form gets submitted, ignoring the validation. $(myButtonSelector).triggerHandler('click') doesn't work at all.

How to execute the existing click handlers?

Answer 1

You can try just copying over the events.

$('button').each(function(){
  var events = $(this).data('events');

  // Copied over from jQuery.fn.clone
  var newElement = // 'a' wrapper?
  for ( var type in events ) {
    for ( var handler in events[ type ] ) {
      jQuery.event.add( newElement, type, events[ type ][ handler ], events[ type ][ handler ].data );
    }
  }
});