Name: jquery-on-safe
Owner: P'unk Avenue
Description: Run an event handler with a delegation selector, but ignore matches nested within a second selector. Helps you cope with nested controls.
Created: 2015-10-15 22:18:16.0
Updated: 2015-10-15 22:22:48.0
Pushed: 2015-10-16 15:14:52.0
Size: 136
Language: HTML
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Run an event handler, optionally with a delegation selector, but ignore matches nested within a second selector. Helps you cope with nested controls.
Problem: I want an event handler to fire on all .content-menus inside a given .area, but only if they are not nested inside another .area within the original one.
class="area outer">
iv class="content-menu"></div>
iv class="content-menu"></div>
iv class="content-menu"></div>
iv class="content-menu"></div>
iv class="area">
<div class="content-menu"></div>
div>
v>
Running $('.area.outer').on('click', '.content-menu', function(...)) on the above markup will receive events for all five instances of content-menu, including the one nested in a second area.
If we try to solve this by using :not in a naive way, it will reject everything, because the original div also has the class area.
$.onSafe('click', selector, ignore)$.onSafe wraps the $.on function but ignores any deeper matches of a second selector, allowing those events to continue on their way unimpeded. Using the example above:
rea.outer').onSafe('click', '.content-menu', '.area', function() {
fires only for the first four content-menus, not the one
in a nested area
$.onSafe works with arbitrarily nested elements.
$.onSafe also works with only three arguments when the event is bubbling up to the element itself:
rea.outer').onSafe('click', '.area', function() {
fires only for the first four content-menus, not the one
in a nested area
This plugin will ignore an event that began nested inside the ignore selector, even if the event bubbles up above that level. Our belief is that this most effectively “firewalls” different nested levels and is closest to the intent of the average programmer trying to make effective use of it.
0.1.2: value of this is correct. More unit test coverage.
0.1.1: three-argument version without a delegation selector.
0.1.0: introduced. Derived from our jquery-find-safe plugin.
jquery-on-safe was created at P'unk Avenue for use in Apostrophe, an open-source content management system built on node.js. If you like jquery-on-safe you should definitely check out apostrophenow.org. Also be sure to visit us on github.
Feel free to open issues on github.
