Javascript 错误：：jQuery UI选项卡：片段标识符不匹配

在我看来，我使用的是Jquery选项卡。最初，一切都很适合我。但稍后，当单击tab-1视图中的按钮（事件）以更改其内容时，我再次使用切换到另一个选项卡（比如tab-2）并通过单击返回到tab-1时，会给出错误：：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")) 
        });
   });

$（函数（）{
$（“#tabs”）.tabs（{可折叠：true}）；
});
$（函数（）{
$（“#按钮”）。单击（函数（）{
$（“#制表符-1”）。替换为（$（“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>

Chenger单击按钮后指向选项卡1的标题





名字
姓
父亲的名字

为什么我会得到这个？

$（函数（）{
$（“#按钮”）。单击（函数（）{
$（“#制表符-1”）。替换为（$（“h1”））
});
});

你为什么自言自语？