Learning jQuery

Need to clone an element and its events? Sure, you could rebind the events after doing the clone, but that wouldn't be very DRY now, would it? Introducing Copy Events, a new plugin for jQuery.

Clone an Element and its Events

The Copy Event plugin makes it easy to clone an element and its events. How? Amazingly simple. Let's say you have an unordered list and each list item has a click, mouseover, and mouseout event. Now you need to clone the last list item and append it to the unordered list.

Here is the HTML:

[html]

• List Item 1
• List Item 2
• List Item 3

[/html]

Here is the JavaScript that applies the event handlers during the $(document).ready event:

[js]$('#myList li') .bind('click', function() { alert( $(this).text() ); }) .bind('mouseover', function() { $(this).addClass('over'); }) .bind('mouseout', function() { $(this).removeClass('over'); }); [/js]

Now, here is the code to clone the last list item with its events:

[js]$('#myList li:last') .cloneWithEvents() .text('List Item ' + ($('#myList li').size()+1)) .appendTo('#myList'); [/js]

DONE! Simple as calling cloneWithEvents(). This method takes an optional parameter called "deep" — just like the clone() method — which, if set to false, copies only the element itself, without any of its descendants. You can see the results here.

More Than Just Cloning

The Copy Events plugin offers two more methods to allow for easy copying of events from one element to another or to several other elements. The first is the copyEvents() method and copies events from an element to the elements in the jQuery object. The second is the copyEventsTo() method which copies events from the first matched element in the jQuery object to the matched elements passed in. Let's take a closer look at both of these methods using the unordered list as an example again.

The copyEvents() Method

The copyEvents() method will copy all event handlers from a given element to the set of elements in the current jQuery object. What does that mean? Using the unordered list example, let's add some list items to the unordered list using AJAX.

Here is the code for the AJAX call that gets the extra list items, copies the events and adds the items to the list:

[js]$.get('list-items.html', function(lis) { $(lis) .copyEvents('#myList li') .appendTo('#myList'); });[/js]

Notice I passed a selector to the copyEvents() method. This method can take a jQuery object, a DOM Element and/or a selector string. When passing in a jQuery object or selector, it will use the first element to copy events from.

You can see the results for this copyEvents example here.

The copyEventsTo() Method

The copyEventsTo() method acts similar to the appendTo() method. It copies events from the first element in the current jQuery object to the passed in elements. Just like the copyEvents() method, the copyEventsTo() method can also take a jQuery object, a DOM Element and/or a selector string.

Let's say we have a new unordered list and would like to copy the events from the existing list to the new list when clicking on a special link:

[html]Copy Events

• New List Item 1
• New List Item 2
• New List Item 3

[/html]

Now let's look at the JavaScript to copy these events over to the new list:

[js]$('#copier') .one('click', function() { $('#myList li') .copyEventsTo('#newList li'); $(this).remove(); return false; });[/js]

I've used the one method to bind the click only once to the <a> tag. When clicked, the events will be copied from the first list item in the #myList unordered list.

Check out the example for yourself here.

Next Steps

The Copy Events plugin can be found in the jQuery Plugins SVN repository.