When more than one event handler is bound to an element, how is it determined which one is triggered first?
I have more than one class in an object.what I want to do is to decide which class will run first when the button is clicked.each class prepares some code for the next class to run.
Currently, each event does not work in the order I want.
<button class="btn-one btn-two btn-three">list</button>
If I put the events in the order I want in the logic that the event of the first incoming service runs first, yes, what I want happens. However, these events are not in a single js file, so putting the js files in order will cause other problems.
$('.btn-one').off('click');
$(document).on('click', '.btn-one', function (e) {
e.preventDefault();
});
$('.btn-two').off('click');
$(document).on('click', '.btn-two', function (e) {
e.preventDefault();
});
$('.btn-three').off('click');
$(document).on('click', '.btn-three', function (e) {
e.preventDefault();
});
I provided control by making hasClass in a single event. However, this priority assignment did not work in the order I wanted, although I wrote it in the order I wanted in html.
<button class="btn-three btn-one btn-two">list</button>
$('.btn-three, .btn-one, .btn-two').click(function() {
var $this = $(this);
if ($this.hasClass('btn-one')) {
// do stuff
} else if ($this.hasClass('btn-two')) {
// do other stuff
} else if ($this.hasClass('btn-three')) {
}
});
or I tried this but this will not work when there are more than two classes
Handler1 - $(document).on('click', 'btn-one', function....)
Handler2 - $('btn-two').on('click', function....)
Handler3 - $('btn-three').on('click', function....)
In the example above, handler 2 is always called before handler 1, but what happens when handler 3 is called?
edit:
I found this example while doing research, it helped a little, but it only determines the first class, the next classes work in the order of ten events, as I said, my events are not in a single js file, but in mixed files.
jQuery event handlers always execute in order they were bound – any way around this?
https://jsfiddle.net/x8Na8/2/
https://jsfiddle.net/j6HP5/2/
4