エラー:: jQueryのUIタブ：不一致のフラグメント識別子

Question

私の意見では、私はJqueryのタブを使用しています。しかし、後でタブ1のビューからボタン（イベント）をクリックしてcontetを変更し、もう一度別のタブ（タブ2と言う）に切り替えて、タブ1に戻ってクリックするとError :: Eror :: jQueryのUIのタブ：不整合フラグメント識別子

スクリプト

<script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs({collapsible:true}); 
    }); 
</script> 

    <script type="text/javascript"> 
    $(function() { 
     $("#button").click(function() { 
      $("#tabs-1").replaceWith($("h1")) 
     }); 
    }); 

ビュー

<h1>Chenger heading for tab-1 after clicking the button</h1> 
    <div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">Info</a></li> 
    <li><a href="#tabs-2">Address</a></li> 
    <li><a href="#tabs-3">Contacts</a></li> 
</ul> 
<div id="tabs-1"> 
    <table > 
    <tr> 
    <td>First Name</td> 
    <td><%: Model.InfoName%></td> 
    </tr> 
    <tr><td>Last Name</td><td> <%: Model.infoLastName%></td></tr> 
    <tr><td>Fathers Name</td><td> <%: Model.infoFatherName%></td></tr> 
    </table> 
    <input type="button" value="Edit" id="button" /> 
    </div> 

なぜ私はこの??????を取得していますか？

Answer 1

<script type="text/javascript"> $(function() { $("#button").click(function() { $("#tabs-1").replaceWith($("h1")) }); });