Jquery-attach NPM

jQuery Attach/Detach

jQuery-attach is a simple jQuery plugin to ensure that elements don't get bound to an event multiple times.

Installation

npm install jquery-attach --save-dev

Basic Usage

Attach Behavior — `attachBehavior(eventName, cb)`

Use this instead of jQuery's on function to initiate the one-time binding.

$('.clicker').attachBehavior('click', function (e) {
  evt.preventDefault();
  // do your thing
});

// or write it in ES6
$('.clicker').attachBehavior('click', e => {
  e.preventDefault();
  // do your thing
});

Arguments:

eventName: the event to be handled (e.g. 'click')
cb: event's callback function
- e: return an event object (optional)

Detach Behavior — `detachBehavior(eventName)`

Use this instead of jQuery's off function to detach the element binding.

$('.clicker').detachBehavior('click');

Arguments:

eventName: the event to be detached (e.g. 'click')

Get Behavior(s) — `getBehavior([eventName])`

Use this to check what behavior's attached to an element

Sample event binding:

$('.clicker').attachBehavior('click', function(evt) {
  evt.preventDefault();
});

$('.clicker').attachBehavior('custom', function(e) {
  e.preventDefault();
});

Getting the behaviors for the behaviors assigned above

// Get all events (and assigned behavior) attached to this element
console.log( $('.clicker').getBehavior() );

// Get the behavior assigned to this element's "custom" event
console.log( $('.clicker').getBehavior('custom') );

Arguments:

eventName: specifies the event in which to get the behavior from (optional)

Additional Usage

Custom Events

jquery-attach can handle Custom Events by using jQuery's trigger function.

See example below:

var $invert = $('.invert');
var $font = $('.font');
var $content = $('.content');

// Attach Custom Events
$content
  .attachBehavior('invertColor', function (e) {
    $content.toggleClass('invert');
  })
  .attachBehavior('toggleFont', function (e) {
    $content.toggleClass('font');
  });

// Trigger "invertColor" Custom Event
$invert.attachBehavior('click', function (e) {
  $content.trigger('invertColor');
});

// Trigger "toggleFont" Custom Event
$font.attachBehavior('click', function (e) {
  $content.trigger('toggleFont');
});

Error Handling

There are two errors that can jquery-attach might throw

When multiple behaviors have been added to an element's event (e.g. multiple click events for a single button)
When the callback argument was passed something that is not a function (e.g. attachBehavior('click', true))

Errors can be handled by using the try...catch statment:

try {
  $('.link').attachBehavior('click', function (e) {
    e.preventDefault();
  });
}
catch (err) {
  console.error(err);
  // handle error here
}

Examples

Tests

Other Notes

jquery-attach supports behavior assignment for elements in the same group or selector (e.g. $('.nav-links'))

jquery-attach supports behavior assignment for different events

$('.content')
  .attachBehavior('invertColor', function (e) {
    $content.toggleClass('invert');
  })
  .attachBehavior('toggleFont', function (e) {
    $content.toggleClass('font');
  });

Using jQuery's on function BEFORE attachBehavior on the same event will also throw an error. (See example below)

$('.link').on('click', function(){});
$('.link').attachBehavior('click', function(){});

// the second line above will throw an error
// saying that the 'click' event
// already has a behavior attached to it

Using jQuery's on function AFTER attachBehavior on the same event will break the intended behavior and will cause the element to be bound to two click events. It's highly suggested to avoid this pattern.
```
// DO NOT DO THIS
$('.link').attachBehavior('click', function(){});
$('.link').on('click', function(){});
```

Changelog:

1.2.2:

Updated error catching and behavior checking to use jQuery's $._data function instead of a custom one.
Updated getBehavior to return either a specific event's behavior, or all of the events attached to the selected element
Localized jquery.min.js on all the tests and examples /vendor

1.2.1: