JQuery UI Button Widget Missing when Removing A Cloned One

JQuery UI Button Widget Missing when Removing A Cloned One

When clicking the testBtn,callback function will copy the testDiv and then append the new testDiv to the old one.
The original testDiv ui-button widget disappear after removing the new testDiv.

  1. <html>
    <head>
    <title></title>
    <script src="./script/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="./script/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("button.testBtn").button().bind("click",function(event){
            var div_old=$("div.testDiv:eq(0)");
            var div_new=div_old.clone(true).insertAfter(div_old);//create a new one (deep clone)
            alert(div_old.html());//alert:<button class="testBtn ui-button.../button>
            div_new.remove();//remove the new one
            alert(div_old.html());//alert:<button class="testBtn">testBtn</button>
        });
    });
    </script>
    </head>
    <body>
    <div class="testDiv"><button class="testBtn">testBtn</button></div>
    </body>
    </html>