Advanced Search

Return to Snippet

Revision: 68215
at December 12, 2014 07:30 by pmw57
Initial Code 
// 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();
});
Initial URL 
http://www.sitepoint.com/effective-event-binding-jquery/
Initial Description 
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.

<button>Toggle Nav Menu</button>
<nav>
    <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>
</nav>
Initial Title 
jQuery hook for separation of concerns
Initial Tags 
javascript, jquery
Initial Language 
jQuery