jquery - MVC4 と jquery ui 1.9 に jquery タブを追加

Question

部分ビューに新しいタブを動的に追加しようとしていますが、これは私のコードです:

脚本

     $(document).ready(function () {
        $("#tabs").tabs();
        jQuery("button").button().click(function () {
             var tabs = $( "#tabs" ).tabs();
             var ul = tabs.find( "ul" );
             $( "<li><a href='#tab4'>New Tab</a></li>" ).appendTo( ul );
             $("<div id='tab4'><p>New Content</p></div>").appendTo(tabs);
             tabs.tabs( "refresh" );
        });
     });

HTML

<div id=tabs>
<ul>
    <li><a href=#tab1>Tab 1</a></li>
    <li><a href=#tab2>Tab 2</a></li>
    <li><a href=#tab3>Tab 3</a></li>
</ul>
    <div id=tab1>Contents of the first tab</div>
    <div id=tab2>Contents of the second tab</div>
    <div id=tab3>Contents of the third tab</div>
</div>

<button>add</button>

問題、ボタンを押すと、次のようになります。

新しいタブがタブに追加されておらず、コンテンツがタブの最後にロードされているようなものです。

何か案が？