Question

首先是通过HTML定义的一个按钮。然后我使用jQuery克隆该按钮，更改文本，并在原始按钮后添加它。请注意新按钮的显示是如何搞砸的？但是当你点击按钮，这会导致图标被更改，它会清理自己！克隆已经被jQueried的元素的正确方法是什么？

例如，想象一下数据列表和“添加”按钮。单击添加克隆整行数据（例如，来自隐藏的模板行），其中包括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/

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

1 个答案: