In jQuery, I'm trying to add a "submit" binding to a form which already has one "submit" binding, but I need the new (second) binding (callback) to fire before the pre-existing one.
Is there a way for me to insert a binding so that it fires ahead of a binding that is already been attached?
You could use $._data( $("#myform")[0], "events" ).submit
See a sample jsfiddle for click event:
Using the undocumented access to the bound functions, supposing your form has id a, you could reverse the order of handler calls like this :
[].reverse.call($._data($('#a').get(0)).events.submit);
Demonstration (Click "Run with JS", open the console, then click the "click" button)
Note that this structure is undocumented and without guarantee :
Note that this is not a supported public interface; the actual data structures may change incompatibly from version to version.
So the real solution would be to change the first binding code.
Trigger the first binding in a callback to the new (second) binding: How to order events bound with jQuery
i know this is a little late, but jQuery exposed this in v1.7 and higher. I have a meeting and will turn this into a working example when i get back ... if I get back.... wish me luck.
#fiddle this runs off the click event, but you can switch it to submit with thought
reposting the html from jsfiddle
<form>
<p>before click</p>
<button type="button">start</button>
</form>
reposting the javascript from jsfiddle
var $elem = $("button"), //jqElementObject
elem=$elem[0], //html element object
eventNameKey="click", //name of the event we want to alter
eventHandlerKey="handler"; //jQuery private object reference to get the actual function ref
$elem.click(function(ev){
//this happens somewhere else, pretend we can't control it per your comments
console.log("1");
ev.preventDefault();
$("p").text($("p").text()+"<div>first binding</div>");
});
//this is ours, we can control this
function submitControler(ev){
console.log("2");
ev.preventDefault();
$("p").text($("p").text()+"<div>second binding</div>");
//uncomment below to stop propogation
//return false;
}
$elem.click(submitControler); //actually register our event
$elem.click(function(ev){ //third event for some fun
ev.preventDefault();
$("p").text($("p").text()+"<div>third binding</div>");
});
var officialEvents = $._data(elem,"events"), //jQuery official Private events
ourSubmitEvents = $.Callbacks("unique stopOnFalse"); //default Callbacks values promises to behave like a standard events list, however, you want your event to fire first, then others to proceed if it returns true. also, no duplicates just because.
//I'm running out of time, so i went with a for loop. I wanted a way to find our event where the registration order was not guaranteed, feel free to go for something better
for(var event = officialEvents[eventNameKey].length-1; event >-1; event--){
if(officialEvents[eventNameKey][event][eventHandlerKey] ===submitControler){
ourSubmitEvents.add(officialEvents[eventNameKey][event][eventHandlerKey]);
console.log("added primary controler");
break;
}
}
//add in everyone else to our list, again, i'm out of time and a for loop was the first thought i had. feel free to improve
for(var event = 0; event < officialEvents[eventNameKey].length; event++){
if(officialEvents[eventNameKey][event][eventHandlerKey] !==submitControler){
ourSubmitEvents.add(officialEvents[eventNameKey][event][eventHandlerKey]);
console.log("added secondary controler");
}
}
//this is our event scheduler, it will be first to execute, and calls our manually re-ordered 'ourSubmitEvents' object. ('ourSubmitEvents' becomes 'ev.data')
$elem.on({"click":function(ev){
ev.preventDefault();
ev.data.fire(ev);
}},null,ourSubmitEvents);
//remove the other events, except the one we just registered.
$._data(elem,"events")[eventNameKey].splice(0,officialEvents[eventNameKey].length-1);
