How to order events bound with jQuery

Question

Lets say I have a web app which has a page that may contain 4 script blocks - the script I write may be found in one of those blocks  but I do not know which one  that is handled by the controller    I bind some onclick events to a button  but I find that they sometimes execute in an order I did not expect    Is there a way to ensure order  or how have you handled this problem in the past

User · Answer

just bind handler normally and then run   element data  events   action reverse      so for example       mydiv   data  events   click reverse

User · Answer

Dowski s method is good if all of your callbacks are always going to be present and you are happy with them being dependant on each other   If you want the callbacks to be independent of each other  though  you could be to take advantage of bubbling and attach subsequent events as delegates to parent elements   The handlers on a parent elements will be triggered after the handlers on the element  continuing right up to the document   This is quite good as you can use event stopPropagation    event preventDefault    etc to skip handlers and cancel or un-cancel the action        mybutton    click  function e            Do stuff first            mybutton    click  function e            Do other stuff first          document   delegate    mybutton    click   function e           Do stuff last        Or  if you don t like this  you could use Nick Leaches bindLast plugin to force an event to be bound last  https   github com nickyleach jQuery bindLast   Or  if you are using jQuery 1 5  you could also potentially do something clever with the new Deferred object

User · Answer

JQuery 1 5 introduces promises  and here s the simplest implementation I ve seen to control order of execution  Full documentation at http   api jquery com jquery when     when      myDiv   css  background-color    red       then  alert  hi        then  myClickFunction      myID         then  myThingToRunAfterClick

User · Answer

just bind handler normally and then run   element data  events   action reverse      so for example       mydiv   data  events   click reverse

User · Answer

JQuery 1 5 introduces promises  and here s the simplest implementation I ve seen to control order of execution  Full documentation at http   api jquery com jquery when     when      myDiv   css  background-color    red       then  alert  hi        then  myClickFunction      myID         then  myThingToRunAfterClick

User · Answer

The order the bound callbacks are called in is managed by each jQuery object s event data   There aren t any functions  that I know of  that allow you to view and manipulate that data directly  you can only use bind   and unbind    or any of the equivalent helper functions    Dowski s method is best  you should modify the various bound callbacks to bind to an ordered sequence of custom events  with the  first  callback bound to the  real  event  That way  no matter in what order they are bound  the sequence will execute in the right way   The only alternative I can see is something you really  really don t want to contemplate  if you know the binding syntax of the functions may have been bound before you  attempt to un-bind all of those functions and then re-bind them in the proper order yourself   That s just asking for trouble  because now you have duplicated code   It would be cool if jQuery allowed you to simply change the order of the bound events in an object s event data  but without writing some code to hook into the jQuery core that doesn t seem possible   And there are probably implications of allowing this that I haven t thought of  so maybe it s an intentional omission

User · Answer

function bindFirst owner  event  handler        owner unbind event  handler       owner bind event  handler        var events   owner data  events   event       events unshift events pop          owner data  events   event    events

User · Answer

function bindFirst owner  event  handler        owner unbind event  handler       owner bind event  handler        var events   owner data  events   event       events unshift events pop          owner data  events   event    events

User · Answer

I had been trying for ages to generalize this kind of process  but in my case I was only concerned with the order of first event listener in the chain    If it s of any use  here is my jQuery plugin that binds an event listener that is always triggered before any others      UPDATED inline with jQuery changes  thanks Toskan       function            fn bindFirst   function   String   eventType     Object     eventData    Function   handler            var indexOfDot   eventType indexOf               var eventNameSpace   indexOfDot  gt  0   eventType substring indexOfDot                 eventType   indexOfDot  gt  0   eventType substring 0  indexOfDot    eventType          handler   handler    undefined   eventData   handler          eventData   typeof eventData     function         eventData           return this each function                 var  this     this               var currentAttrListener   this  on    eventType                if  currentAttrListener                     this bind eventType  function e                        return currentAttrListener e originalEvent                                         this  on    eventType    null                              this bind eventType   eventNameSpace  eventData  handler                var allEvents    this data  events         data  this 0    events                var typeEvents   allEvents eventType               var newEvent   typeEvents pop                typeEvents unshift newEvent                         jQuery     Things to note    This hasn t been fully tested  It relies on the internals of the jQuery framework not changing  only tested with 1 5 2   It will not necessarily get triggered before event listeners that are bound in any way other than as an attribute of the source element or using jQuery bind   and other associated functions

User · Answer

Here s my shot at this  covering different versions of jQuery      Binds a jQuery event to elements at the start of the event chain for that type  jQuery extend        bindEventHandlerAtStart  function   elements  eventType  handler            var  data            elements bind eventType  handler              This bound the event  naturally  at the end of the event chain  We            need it at the start           if  typeof jQuery  data      function                    Since jQuery 1 8 1  it seems  that the events object isn t                available through the public API   data  method                 Using     data  where it exists  seems to work               data   true                      elements each function  index  element                var events               if   data                    events   jQuery  data element   events   eventType                 else                   events   jQuery element  data  events   eventType                              events unshift events pop                  if   data                    jQuery  data element   events   eventType    events                else                   jQuery element  data  events   eventType    events

User · Answer

Dowski s method is good if all of your callbacks are always going to be present and you are happy with them being dependant on each other   If you want the callbacks to be independent of each other  though  you could be to take advantage of bubbling and attach subsequent events as delegates to parent elements   The handlers on a parent elements will be triggered after the handlers on the element  continuing right up to the document   This is quite good as you can use event stopPropagation    event preventDefault    etc to skip handlers and cancel or un-cancel the action        mybutton    click  function e            Do stuff first            mybutton    click  function e            Do other stuff first          document   delegate    mybutton    click   function e           Do stuff last        Or  if you don t like this  you could use Nick Leaches bindLast plugin to force an event to be bound last  https   github com nickyleach jQuery bindLast   Or  if you are using jQuery 1 5  you could also potentially do something clever with the new Deferred object

User · Answer

If order is important you can create your own events and bind callbacks to fire when those events are triggered by other callbacks       mydiv   click function e           maniplate  mydiv             mydiv   trigger  mydiv-manipulated             mydiv   bind  mydiv-manipulated   function e           do more stuff now that  mydiv has been manipulated     return        Something like that at least

User · Answer

Please note that in the jQuery universe this must be implemented differently as of version 1 8   The following release note is from the jQuery blog       data    events      jQuery stores its event-related data in a data object   named  wait for it  events on each element  This is an internal data   structure so in 1 8 this will be removed from the user data name space   so it won   t conflict with items of the same name  jQuery   s event data   can still be accessed via jQuery  data element   events     We do have complete control of the order in which the handlers will execute in the jQuery universe   Ricoo points this out above   Doesn t look like his answer earned him a lot of love  but this technique is very handy   Consider  for example  any time you need to execute your own handler prior to some handler in a library widget  or you need to have the power to cancel the call to the widget s handler conditionally      button   click function e       if bSomeConditional         e stopImmediatePropagation     Don t execute the widget s handler    each function          var aClickListeners      data this   events   click      aClickListeners reverse

User · Answer

The order the bound callbacks are called in is managed by each jQuery object s event data   There aren t any functions  that I know of  that allow you to view and manipulate that data directly  you can only use bind   and unbind    or any of the equivalent helper functions    Dowski s method is best  you should modify the various bound callbacks to bind to an ordered sequence of custom events  with the  first  callback bound to the  real  event  That way  no matter in what order they are bound  the sequence will execute in the right way   The only alternative I can see is something you really  really don t want to contemplate  if you know the binding syntax of the functions may have been bound before you  attempt to un-bind all of those functions and then re-bind them in the proper order yourself   That s just asking for trouble  because now you have duplicated code   It would be cool if jQuery allowed you to simply change the order of the bound events in an object s event data  but without writing some code to hook into the jQuery core that doesn t seem possible   And there are probably implications of allowing this that I haven t thought of  so maybe it s an intentional omission

User · Answer

You can try something like this           Guarantee that a event handler allways be the last to execute      param owner The jquery object with any others events handlers   selector       param event The event descriptor like  click       param handler The event handler to be executed allways at the end      function bindAtTheEnd owner event handler       var aux function   owner unbind event handler  owner bind event handler         bindAtTheStart owner event aux true              Bind a event handler at the start of all others events handlers       param owner Jquery object with any others events handlers   selector        param event The event descriptor for example  click        param handler The event handler to bind at the start       param one If the function only be executed once      function bindAtTheStart owner event handler one       var eventos index      var handlers new Array        owner unbind event handler       eventos owner data  events   event       for index 0 index lt eventos length index  1           handlers index  eventos index             owner unbind event       if one           owner one event handler             else          owner bind event handler             for index 0 index lt handlers length index  1           owner bind event ownerhandlers index

User · Answer

Please note that in the jQuery universe this must be implemented differently as of version 1 8   The following release note is from the jQuery blog       data    events      jQuery stores its event-related data in a data object   named  wait for it  events on each element  This is an internal data   structure so in 1 8 this will be removed from the user data name space   so it won   t conflict with items of the same name  jQuery   s event data   can still be accessed via jQuery  data element   events     We do have complete control of the order in which the handlers will execute in the jQuery universe   Ricoo points this out above   Doesn t look like his answer earned him a lot of love  but this technique is very handy   Consider  for example  any time you need to execute your own handler prior to some handler in a library widget  or you need to have the power to cancel the call to the widget s handler conditionally      button   click function e       if bSomeConditional         e stopImmediatePropagation     Don t execute the widget s handler    each function          var aClickListeners      data this   events   click      aClickListeners reverse

User · Answer

The order the bound callbacks are called in is managed by each jQuery object s event data   There aren t any functions  that I know of  that allow you to view and manipulate that data directly  you can only use bind   and unbind    or any of the equivalent helper functions    Dowski s method is best  you should modify the various bound callbacks to bind to an ordered sequence of custom events  with the  first  callback bound to the  real  event  That way  no matter in what order they are bound  the sequence will execute in the right way   The only alternative I can see is something you really  really don t want to contemplate  if you know the binding syntax of the functions may have been bound before you  attempt to un-bind all of those functions and then re-bind them in the proper order yourself   That s just asking for trouble  because now you have duplicated code   It would be cool if jQuery allowed you to simply change the order of the bound events in an object s event data  but without writing some code to hook into the jQuery core that doesn t seem possible   And there are probably implications of allowing this that I haven t thought of  so maybe it s an intentional omission

User · Answer

I had been trying for ages to generalize this kind of process  but in my case I was only concerned with the order of first event listener in the chain    If it s of any use  here is my jQuery plugin that binds an event listener that is always triggered before any others      UPDATED inline with jQuery changes  thanks Toskan       function            fn bindFirst   function   String   eventType     Object     eventData    Function   handler            var indexOfDot   eventType indexOf               var eventNameSpace   indexOfDot  gt  0   eventType substring indexOfDot                 eventType   indexOfDot  gt  0   eventType substring 0  indexOfDot    eventType          handler   handler    undefined   eventData   handler          eventData   typeof eventData     function         eventData           return this each function                 var  this     this               var currentAttrListener   this  on    eventType                if  currentAttrListener                     this bind eventType  function e                        return currentAttrListener e originalEvent                                         this  on    eventType    null                              this bind eventType   eventNameSpace  eventData  handler                var allEvents    this data  events         data  this 0    events                var typeEvents   allEvents eventType               var newEvent   typeEvents pop                typeEvents unshift newEvent                         jQuery     Things to note    This hasn t been fully tested  It relies on the internals of the jQuery framework not changing  only tested with 1 5 2   It will not necessarily get triggered before event listeners that are bound in any way other than as an attribute of the source element or using jQuery bind   and other associated functions

User · Answer

If order is important you can create your own events and bind callbacks to fire when those events are triggered by other callbacks       mydiv   click function e           maniplate  mydiv             mydiv   trigger  mydiv-manipulated             mydiv   bind  mydiv-manipulated   function e           do more stuff now that  mydiv has been manipulated     return        Something like that at least

User · Answer

Here s my shot at this  covering different versions of jQuery      Binds a jQuery event to elements at the start of the event chain for that type  jQuery extend        bindEventHandlerAtStart  function   elements  eventType  handler            var  data            elements bind eventType  handler              This bound the event  naturally  at the end of the event chain  We            need it at the start           if  typeof jQuery  data      function                    Since jQuery 1 8 1  it seems  that the events object isn t                available through the public API   data  method                 Using     data  where it exists  seems to work               data   true                      elements each function  index  element                var events               if   data                    events   jQuery  data element   events   eventType                 else                   events   jQuery element  data  events   eventType                              events unshift events pop                  if   data                    jQuery  data element   events   eventType    events                else                   jQuery element  data  events   eventType    events

User · Answer

If order is important you can create your own events and bind callbacks to fire when those events are triggered by other callbacks       mydiv   click function e           maniplate  mydiv             mydiv   trigger  mydiv-manipulated             mydiv   bind  mydiv-manipulated   function e           do more stuff now that  mydiv has been manipulated     return        Something like that at least

User · Answer

In some special cases  when you cannot change how the click events are bound  event bindings are made from others  codes   and you can change the HTML element  here is a possible solution  warning  this is not the recommended way to bind events  other developers may murder you for this     lt span onclick  yourEventHandler event   gt Button lt  span gt    With this way of binding  your event hander will be added first  so it will be executed first

User · Answer

In some special cases  when you cannot change how the click events are bound  event bindings are made from others  codes   and you can change the HTML element  here is a possible solution  warning  this is not the recommended way to bind events  other developers may murder you for this     lt span onclick  yourEventHandler event   gt Button lt  span gt    With this way of binding  your event hander will be added first  so it will be executed first

User · Answer

I have same issue and found this topic  the above answers can solve those problem  but I don t think them are good plans   let us think about the real world    if we use those answers  we have to change our code  you have to change your code style  something like this   original      form   submit handle     hack   bindAtTheStart    form    submit  handle     as time goes on  think about your project  the code is ugly and hard to read  anthoer reason is simple is always better  if you have 10 bindAtTheStart  it may no bugs  if you have 100 bindAtTheStart  are you really sure you can keep them in right order    so if you have to bind same events multiple I think the best way is control js-file or js-code load order  jquery can handle event data as queue  the order is  first-in  first-out  you don t need change any code  just change load order

User · Answer

I have same issue and found this topic  the above answers can solve those problem  but I don t think them are good plans   let us think about the real world    if we use those answers  we have to change our code  you have to change your code style  something like this   original      form   submit handle     hack   bindAtTheStart    form    submit  handle     as time goes on  think about your project  the code is ugly and hard to read  anthoer reason is simple is always better  if you have 10 bindAtTheStart  it may no bugs  if you have 100 bindAtTheStart  are you really sure you can keep them in right order    so if you have to bind same events multiple I think the best way is control js-file or js-code load order  jquery can handle event data as queue  the order is  first-in  first-out  you don t need change any code  just change load order

User · Answer

The order the bound callbacks are called in is managed by each jQuery object s event data   There aren t any functions  that I know of  that allow you to view and manipulate that data directly  you can only use bind   and unbind    or any of the equivalent helper functions    Dowski s method is best  you should modify the various bound callbacks to bind to an ordered sequence of custom events  with the  first  callback bound to the  real  event  That way  no matter in what order they are bound  the sequence will execute in the right way   The only alternative I can see is something you really  really don t want to contemplate  if you know the binding syntax of the functions may have been bound before you  attempt to un-bind all of those functions and then re-bind them in the proper order yourself   That s just asking for trouble  because now you have duplicated code   It would be cool if jQuery allowed you to simply change the order of the bound events in an object s event data  but without writing some code to hook into the jQuery core that doesn t seem possible   And there are probably implications of allowing this that I haven t thought of  so maybe it s an intentional omission

User · Answer

If order is important you can create your own events and bind callbacks to fire when those events are triggered by other callbacks       mydiv   click function e           maniplate  mydiv             mydiv   trigger  mydiv-manipulated             mydiv   bind  mydiv-manipulated   function e           do more stuff now that  mydiv has been manipulated     return        Something like that at least

User · Answer

You can try something like this           Guarantee that a event handler allways be the last to execute      param owner The jquery object with any others events handlers   selector       param event The event descriptor like  click       param handler The event handler to be executed allways at the end      function bindAtTheEnd owner event handler       var aux function   owner unbind event handler  owner bind event handler         bindAtTheStart owner event aux true              Bind a event handler at the start of all others events handlers       param owner Jquery object with any others events handlers   selector        param event The event descriptor for example  click        param handler The event handler to bind at the start       param one If the function only be executed once      function bindAtTheStart owner event handler one       var eventos index      var handlers new Array        owner unbind event handler       eventos owner data  events   event       for index 0 index lt eventos length index  1           handlers index  eventos index             owner unbind event       if one           owner one event handler             else          owner bind event handler             for index 0 index lt handlers length index  1           owner bind event ownerhandlers index

[javascript] How to order events bound with jQuery

Examples related to javascript

Examples related to jquery

Examples related to events