删除克隆的jQuery UI按钮将删除基本按钮的样式

Question

I've set up this Fiddle for you: http://jsfiddle.net/MNpRh/4/

$("#removebtn").button();
$(document).on("click", ".remove", function(){
   $(this).remove();
});
$("#clone").click(function(){
   $("#removebtn").parents(".group").clone(true).appendTo("#content");
});

Hit Clone a couple times then remove any button. The button style will be removed and not cloned again.

It's based on jQuery UI 1.8. It works in 1.10, but I'm not able to upgrade jQuery UI.

How would you solve this?

Thanks in advance!

Answer 1

To keep hover effect please see modified solution with added pattern div which is hidden by CSS http://jsfiddle.net/MNpRh/8/

Addition to HTML:

<div class="group" id="pattern">
     <button class="remove">Remove me</button>
</div>

CSS:

#pattern { display:none;}

JQuery:

$("#removebtn").button();
$(document).on("click", ".remove", function(){
    $(this).remove();
});
$("#clone").click(function(){
  $('#pattern').clone().appendTo("#content").removeAttr('id').find('button').button();
});