Examples/Demo

agjVersionless is designed to be easily integrated into existing projects quickly and without compatibility issues or any other conflicts. Because it’s a jQuery plugin you will first need to include an HTML reference to the jQuery JavaScript library if you don’t already have one. From there, simply add an HTML reference to jquery.agjVersionless.js to start using the agjVersionless plugin.

<!-- Reference to the jQuery JavaScript library -->
<script type="text/javascript" src="//code.jquery.com/jquery-4.0.0.min.js"></script>

<!-- Reference to the agjVersionless jQuery plugin -->
<script type="text/javascript" src="//agjVersionless.agjjQuery.org/distribution/jquery.agjVersionless.min.js"></script>

All of the examples below have interactive demos for you to try out.

Example One: Counter

To bind an event handler (e.g. when an element is clicked) simply select a jQuery element and call its agjVersionless.bind() function. Alternatively you can call the $.agjVersionless.bind() function directly and pass your element as the first parameter. This code will work across jQuery 1, 2, 3 and 4 with no need for reverse compatibility considerations.

// Track the number of clicks
var counter1 = 0;

// Bind an event handler regardless of jQuery version
$('#example-01-button-1').agjVersionless.bind('click', function() {
  counter1++;
  $('#example-01-counter-1').text('Counter: ' + counter1);
});

HTML Source & JavaScript Source

// Track the number of clicks
var counter2 = 0;

// Bind an event handler regardless of jQuery version
$.agjVersionless.bind($('#example-01-button-2'), 'click', function() {
  counter2++;
  $('#example-01-counter-2').text('Counter: ' + counter2);
});

HTML Source & JavaScript Source

Example Two: All the Functions

This example demonstrates all four available functions. $.agjVersionless.bind() and its alias $.agjVersionless.on() attach an event handler to an element; $.agjVersionless.unbind() and its alias $.agjVersionless.off() remove it. All four work identically across jQuery 1, 2, 3 and 4.

// Bind an event handler regardless of jQuery version
$.agjVersionless.bind($('#example-02-1'), 'click', function() {
  console.log('clicked');
});

// Trigger an event
$('#example-02-1').trigger('click');

// Unbind an event handler regardless of jQuery version
$.agjVersionless.unbind($('#example-02-1'), 'click');

HTML Source & JavaScript Source