如何使用 jQuery 正确克隆按钮（和其他东西）？

Question

看看这个例子：http://jsfiddle.net/9NXHq/15/

它从一个通过 HTML 定义的按钮开始。然后我使用 jQuery 克隆该按钮，更改文本，并将其添加到原始按钮之后。注意到新按钮的显示是如何混乱的吗？但是，当您单击导致图标更改的按钮时，它会自行清理！克隆已经查询过的元素的正确方法是什么？

例如，想象一个数据列表和一个“添加”按钮。单击添加克隆一整行数据（例如，来自隐藏的模板行），其中包括 jQueried 元素，例如按钮、自动完成等。如何“重组”这个新行中的元素以确保它们正常工作?

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

我记得自己尝试过这样做。这是我解决的解决方案。

// 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);

我尝试了 .clone(true) 但它以前一个的所有绑定事件结束。 .button() 只是做了太多的事情来 .clone 它，我发现复制设置并重新初始化它更容易。

这是小提琴：http://jsfiddle.net/9NXHq/23/