How to call previously bound event after the current?

Question

This question came to my mind when I was experimenting with multiple events bound to the same object. Still I'm trying to find the most simple solution.

Imagine we have this markup:

​<select class="class1 class2">
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
</select>
​<p></p>​​​​​​​​​​​​​​​​​​​​​

And two methods bound to select for change event:

$(".class1").on("change", function() {
    // first method for change
    $("p").append("<div>Event for class1</div>");
});

$(".class2").on("change", function() {
    // second method for change
    $("p").append("<div>Event for class2</div>");
});

​ Now if you make selection change the content of p will be:

Event for class1
Event for class2

My 'research' question is how to rewrite the second on handler in order to make it fire its handler first. So finally the content of p should be:

Event for class2
Event for class1

The situation is so that we are unable to swap on statements in the source.

What ideas do you have?

Answer 1

First, though it may not be the aim of your research, you don't need two classes to bind events to handlers. You could just call $(".class1").on(...); twice.

Second, handler execution order should not be important, but I understand that this is pure testing/research.

About your question, two options come to mind...

1.- Unbind/bind events, if possible. Code would be like this:

$(".class1").on("change", function() {
    // first method for change
    $("p").append("<div>Event for class1</div>");
});

// Unbind event, then bind again
$(".class1").off("change").on("change", function() {
    // second method for change
    $("p").append("<div>Event for class2</div>");
    $("p").append("<div>Event for class1</div>");
});

2.- As in question How to order events bound with jQuery, create your own event:

$(".class1").on("change", function() {
    // first method for change
    $("p").append("<div>Event for class1</div>");
});

// Bind custom event
$(".class1").on("myCustomEvent", function() {
    // first method for change
    $("p").append("<div>Event for class1</div>");
});

$(".class2").off("change").on("change", function() {
    // second method for change
    $("p").append("<div>Event for class2</div>");

    // Trigger custom event
    $(".class1").trigger("myCustomEvent");
});

Answer 2

There are solutions for this. One example is the preBind by Jonathan Conway.

This plugin manipulates jQuery's event handler list for an element and adds an event at the front of it instead at the end.

So you use $(...).preBind where you used bind earlier. This does not apply to $(...).on but similar solution could be easily made from this.

This however is something I would strongly advise you not to do, as events competing for first place is often sign of bad architecture.