Question

Have a look at this example: http://jsfiddle.net/9NXHq/15/

It starts with one button defined via HTML. I then clone that button using jQuery, change the text, and add it after the original button. Notice how the new button’s display is all messed up? But when you click the button, which causes the icon to be changed, it cleans itself up! What’s the proper way to clone elements which have already been jQueried?

For instance, imagine a list of data and an “Add” button. Clicking add clones an entire row of data (from a hidden template row, for example) which includes jQueried elements such as buttons, auto-completes, etc. How should the elements in this new row be “reconstituted” to ensure that they work properly?

HTML

<a id="btn">This is a button.</a>​

CSS

/* Standard jQuery UI (1.8.16 in this case). */

JavaScript

/* Standard jQuery (1.7.1 in this case). */

var btn = $("a#btn");
var btn2 = null;

btn.button({ icons: { primary: "ui-icon-plus" } });
btn.click(function ()
{    
    $(this).button({ label: "Clicked!", icons: { primary: "ui-icon-check" } });
});

btn2 = btn.clone();
btn2.click(function ()
{    
    $(this).button({ label: "Clicked! (2)", icons: { primary: "ui-icon-check" } });
});                   
btn2.text(btn2.text() + " (2)");
btn2.insertAfter(btn);

//Need to re-constitue btn2 as a button.
btn2.button();

Answer 1

I remember trying to do this myself. This was the solution I settled with.

// Get source buttons options.. for icons and stuff. 
var btn_options = btn.button('option');

// Clone the button, change the ID, and re-init the button. 
var btn2 = btn
  .clone()
  .attr("id", "btn2")
  .button(btn_options);

I tried .clone(true) but it ends up with all the binded events of the previous one. .button() simply does too much thing to just be able to .clone it, I found it easier to just copy the settings and reinit it.

This is the fiddle: http://jsfiddle.net/9NXHq/23/