Ошибка :: вкладки пользовательского интерфейса jQuery: несоответствие идентификатора фрагмента

Question

На мой взгляд, я использую вкладки Jquery. Изначально у меня все работает нормально. Но позже, когда я нажимаю кнопку (событие) в представлении tab-1, чтобы изменить его контекст, а затем снова я использую, чтобы переключиться на другую вкладку (скажем, tab-2) и, возвращаясь к tab-1, нажимая ее, выдает Error :: Eror :: Вкладки пользовательского интерфейса jQuery: несоответствующий идентификатор фрагмента

Сценарий

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

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

View

 <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")) }); });