Hi everybody,

I need the following functionality to be achieved:

1) gallery elements include an image and a few clickable icons. One of the icons should clone the element itself

2) Each new cloned element should have the same set of clickable icons, i.e. could be cloned as well by clicking its "clone" icon.

The attached code assigns these events on page loading. as you can see, the last event makes a clone of that element.

The PROBLEM: I cannot figure out how to assign new events for the cloned elements. If I make a function from the attached code and add it in the "cloning" section, we will get an infinite loop.

Please, advise.

Thanks

===================================================

    

     
 $('ul.gallery > li').click(function(ev) {
 var $item = $(this);
 var $target = $(ev.target);

 if ($target.is('a.ui-icon-trash')) {
 alert('php');
 call_php($item);
 deleteImage($item);
 } else if ($target.is('a.ui-icon-zoomin')) {
 alert('php2');
 viewLargerImage($target);
 } else if ($target.is('a.ui-icon-refresh')) {
 recycleImage($item);
 alert('php3');
 }
 else if ($target.is('a.ui-icon-refresh-clone')) {

 alert('clone'); 
 if($bask == 1) {
 var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
 } else {
 var $list = $('ul',$wfp).length ? $('ul',$wfp) : $('<ul class="gallery ui-helper-reset"/>').appendTo($wfp);
 }
 
 $item.clone().appendTo($list).fadeIn(function() {
 $item.clone().animate({ width: '48px' }).find('img').animate({ height: '36px' });
 });
 
 }


 return false;
 });