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:
- <ul id="myList">
- <li>List Item 1</li>
- <li>List Item 2</li>
- <li>List Item 3</li>
Now, here is the code to clone the last list item with its events:
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.
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:
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.
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:
- <a href="#" id="copier" title="Copy Events">Copy Events</a>
- <ul id="newList">
- <li>New List Item 1</li>
- <li>New List Item 2</li>
- <li>New List Item 3</li>
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.
The Copy Events plugin can be found in the jQuery Plugins SVN repository.
The ability to copy events has been added to jQuery core as of jQuery 1.2.x. Simply use