Live Binding Events in jQuery UI Widget Factory using this._on ()

Question

I am currently developing a cascade tree. When a tree element expands, it creates a <div> below it, which can also be expanded. I can get the first set of <div> to bind and therefore expand, but I cannot force the automatically generated div to bind automatically using the this._on method. I am looking for functionality similar to live (), delegate () and on ().

I posted my code in jsFiddle at http://jsfiddle.net/vEAhq/ .

I set the event binding using the _setupEvents method on line 60.

In the overview, elements created in the refresh method that are called during the _create method are well connected. These are elements created in the _expand method that are not connected as I expected.

Thanks in advance for your time.

 $.widget( "custom.categoryMenu", { options: { links: null }, _create: function() { this.refresh(); this._on('.categoryNavigationExpandIcon', { click: function(event) { var $container = $(event.target).parent(); if( ($container).data('expanded') === false ) { this._expand($container); } else { this._contract($container); } } }); }, refresh: function() { var $elm = this.element; var $newElem; var $itemTree = this.options.links; var $itemTreeRoot = sortObj( $itemTree['1'], 'function', true ); this._setupEvents(); $.each( $itemTreeRoot, function( key, value ) { var ID = $itemTreeRoot[key]; var label = key; $newElem = $( '<div style="padding:8px 0;"></div>' ) .data( 'expanded', false ) .data( 'id', ID ) .data( 'level', 1 ) .addClass( 'categoryNavigationLevel1' ); $( '<div class="categoryNavigationExpandIcon"></div>' ).appendTo($newElem); $( '<a href="index.cfm?action=products&cat=' + ID + '" rel="?cat=' + ID + '" class="categoryMenuLabel">' + label + '</a>' ).appendTo($newElem); // Add triangle icons if there are children if ($itemTree[ID]) { $($newElem) .find('.categoryNavigationExpandIcon') .addClass('ui-icon') .addClass('ui-icon-triangle-1-e'); } $elm.append($newElem); }); }, _setupEvents: function() { var events = { click: function( event ) { event.preventDefault(); } }; this._on('.categoryNavigationExpandIcon', { click: function(event) { var $container = $(event.target).parent(); if( ($container).data('expanded') === false ) { this._expand($container); } else { this._contract($container); } } }); }, _expand: function(container) { var $elm = this.element; var $itemTree = this.options.links; var containerLevel = $(container).data('level'); var containerID = $(container).data('id'); var newContainerLevel = containerLevel + 1; var $itemTreeBranch = sortObj( $itemTree[containerID], 'function', true ); $(container) .data('expanded', true) .find('.ui-icon-triangle-1-e') .removeClass('ui-icon-triangle-1-e') .addClass('ui-icon-triangle-1-se'); $.each( $itemTreeBranch, function( key, value ) { var ID = $itemTreeBranch[key]; label = key; $newElem = $( '<div style="padding:8px 0;"></div>' ) .data('expanded', false) .data( 'id', ID ) .data( 'level', newContainerLevel ) .addClass( 'categoryNavigationLevel' + newContainerLevel ); $( '<div class="categoryNavigationExpandIcon"></div>' ).appendTo($newElem); $( '<a href="index.cfm?action=products&cat=' + ID + '" rel="?cat=' + ID + '" class="categoryMenuLabel">' + label + '</a>' ).appendTo($newElem); // Add triangle icons if there are children if ($itemTree[ID]) { $($newElem) .find('.categoryNavigationExpandIcon') .addClass('ui-icon') .addClass('ui-icon-triangle-1-e'); } $(container).after($newElem); }); }, _contract: function(container) { var containerLevel = $(container).data('level'); $(container) .data( 'expanded', false ) .find('.ui-icon-triangle-1-se') .removeClass('ui-icon-triangle-1-se') .addClass('ui-icon-triangle-1-e'); $(container) .nextUntil( '.categoryNavigationLevel' + containerLevel ) .remove(); }, destroy: function() { $.widget.prototype.destroy.call(this); } }); /** * Name: Sort Javascript Object * Credit: Arne Martin Aurlien * URL: http://am.aurlien.net/post/1221493460/sorting-javascript-objects */ sortObj = function(obj, type, caseSensitive) { var temp_array = []; for (var key in obj) { if (obj.hasOwnProperty(key)) { if (!caseSensitive) { key = (key['toLowerCase'] ? key.toLowerCase() : key); } temp_array.push(key); } } if (typeof type === 'function') { temp_array.sort(type); } else if (type === 'value') { temp_array.sort(function(a,b) { var x = obj[a]; var y = obj[b]; if (!caseSensitive) { x = (x['toLowerCase'] ? x.toLowerCase() : x); y = (y['toLowerCase'] ? y.toLowerCase() : y); } return ((x < y) ? -1 : ((x > y) ? 1 : 0)); }); } else { temp_array.sort(); } var temp_obj = {}; for (var i=0; i<temp_array.length; i++) { temp_obj[temp_array[i]] = obj[temp_array[i]]; } return temp_obj; }; 

Answer 1

This is best when you need to add newly created content, bind events in a document, for a given selector, or for custom events.

For example, if you are trying to attach a click to a given class. "Our-class ":

 $('.your-class').on('click', function (e) { // ... }) 

You would prefer to replace it with:

 $(document).on('click', '.your-class', function (e) { // ... }) 

This is exactly the same for jQuery UI:

You would simply prefer to replace:

 // Here you just bind a click on the existing elements of your class this._on('.categoryNavigationExpandIcon', { click: function(event) { var $container = $(event.target).parent(); if( ($container).data('expanded') === false ) { this._expand($container); } else { this._contract($container); } } }); 

By:

 // Bind a custom event on the document in order to delegate this event event to the new created classes this._on(this.document, { 'click.categoryNavigationExpandIcon': function(event) { var $container = $(event.target).parent(); if( ($container).data('expanded') === false ) { this._expand($container); } else { this._contract($container); } } }); 

You can find the updated JSFiddle here: http://jsfiddle.net/vEAhq/7/

By the way, you can skip the closing tag when creating an element using jQuery!

 $('<div>'); // instead of $('<div></div>');