/ Published in: jQuery
The purpose of this hook method is to help provide a separation of concerns between CSS and JavaScript.
Typically class names are used to attach JavaScript to HTML elements. Using a separate data-hook attribute helps to protect the scripting from CSS changes.
With the following example toggle button for a menu, we can hook on to the data-hook attribute.
Toggle Nav Menu
<ul>
<li><a href="/">West Philadelphia</a></li>
<li><a href="/cab">Cab Whistling</a></li>
<li><a href="/throne">Throne Sitting</a></li>
</ul>
Typically class names are used to attach JavaScript to HTML elements. Using a separate data-hook attribute helps to protect the scripting from CSS changes.
With the following example toggle button for a menu, we can hook on to the data-hook attribute.
Toggle Nav Menu
<ul>
<li><a href="/">West Philadelphia</a></li>
<li><a href="/cab">Cab Whistling</a></li>
<li><a href="/throne">Throne Sitting</a></li>
</ul>
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
// define hook method $.extend({ hook: function (hookName) { var selector; if (!hookName || hookName === '*') { // select all data-hooks selector = '[data-hook]'; } else { // select specific data-hook selector = '[data-hook~="' + hookName + '"]'; } return $(selector); } }); // use hook method on data-hook attributes $.hook('nav-menu-toggle').on('click', function() { $.hook('nav-menu').toggle(); });
URL: http://www.sitepoint.com/effective-event-binding-jquery/