13

Is there a way to make sure the event handler you attach is the last in the chain of event handlers to be executed?

I have an event handler that submits a form by ajax, but at a later time, after I attach my ajax submitting handler, another handler is attached to the form to do validation logic. The validation logic should occur before the ajax submitting handler, but it doesn't since it was bound afterwards.

Is there a way to make it so my ajax submitting handler always is the last handler in the chain of handlers to be executed, without changing the order in which the handlers are bound?

Kyle
  • 21,377
  • 37
  • 113
  • 200
  • can you give a piece of code? – dzida Jun 30 '10 at 15:44
  • See a similar [question](http://stackoverflow.com/questions/2360655/jquery-event-handlers-always-execute-in-order-they-were-bound-any-way-around-th/2641047#2641047). – Anurag Feb 03 '12 at 17:18
  • I posted a different solution to this problem on [this question](http://stackoverflow.com/a/19674508/315024). – Walf Oct 30 '13 at 05:32
  • Possible duplicate of [How to order events bound with jQuery](http://stackoverflow.com/questions/290254/how-to-order-events-bound-with-jquery) – Jonathan Hall Jan 03 '16 at 13:41

2 Answers2

6

I don't think there is a way to manipulate the order directly.

Take a look at this: How to order events bound with jQuery

Community
  • 1
  • 1
David Radcliffe
  • 1,481
  • 10
  • 12
3

My solution (http://jsfiddle.net/968jj/1345/) :

 $.fn.lastHandler = function (events, handler) {
     var element = $(this);
     events = events.split(' ');
     for (var evt in events) {
         var event = $(element).data("events")[events[evt]];
         var hsucess = null;
         $.each(event, function (i, h) {
             if (h.handler == handler) {
                 hsucess = h;
             }
         });
         var index = event.indexOf(hsucess);
         if (index > -1) {
             event.splice(index, 1);
             event.push(hsucess);
         }
     }
 }

usage:

$(function() {

   var m1 = function(){ alert("mouseover to be the last"); };
   var m2 = function(){ alert("mouseover to be the first"); };
   var m3 = function(){ alert("mouseover to be the second"); };
   $("#el").mouseover(m1);
   $("#el").mouseover(m2);
   $("#el").mouseover(m3);

   $("#el").lastHandler('mouseover',m1);

});

With some HTML

<div id="el"></div>

and some CSS

div { width: 200px; height: 200px; background-color: red; }

You can use it with any one or more than one event:

$("#el").lastHandler('keypress keyup change',fnHandler);
$("#el").lastHandler('click mouseover',fnHandler);
Pedro Pinheiro
  • 31
  • 2