Change Event Execution Order In jQuery - Prioritize.js

File Size: 8.14 KB
Views Total: 2448
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Change Event Execution Order In jQuery - Prioritize.js

A tiny yet useful jQuery plugin to extend the jQuery on() method that enables the user to prioritize jQuery events where multiple event handlers are attached to an element.

How to use it:

1. Install & Download the package.

# Yarn
$ yarn add jquery-prioritize

# NPM
$ npm i jquery-prioritize --save

2. Load the main script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/lib/index.js"></script>

3. Attach multiple event handles to an element and set the priority by passing the priority options as the second parameter to the on() method as follows:

<button id="example">Click Me</button>
var $test = $("#example");

$test.on('click', 5, function (){
  alert('Priority 5');
});

$test.on('click', 1, function (){
  alert('Priority 1');
});

$test.on('click', 3, function (){
  alert('Priority 3');
});

$test.on('click', 2, function (){
  alert('Priority 2');
});

$test.on('click', 4, function (){
  alert('Priority 4');
});

This awesome jQuery plugin is developed by IonicaBizau. For more Advanced Usages, please check the demo page or visit the official website.