How to properly clone buttons (and other things) using jQuery?

[plulgedge]

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\[code\]<a id="btn">This is a button.</a>?\[/code\]CSS\[code\]/* Standard jQuery UI (1.8.16 in this case). */\[/code\]JavaScript\[code\]/* 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();\[/code\]