javascript - JQuery Mobile 创建了错误的 HTML 代码

Question

我目前正在使用 JQuery Mobile 开发适用于 Android 的 PhoneGap 应用程序。我想要的只是动态更改可折叠的标题文本:

<div data-role="collapsible" id="collapse">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content</p>
</div>

该代码来自 demos.jquerymobile.com。 Chrome DevTools 为这个示例提供了以下 html: http://de.tinypic.com/r/2uf982p/8

出于任何原因，如果我将完全相同的代码复制到我的 index.html 并运行它，chrome DevTools 会给我以下 html: http://de.tinypic.com/r/2wohcf7/8

为什么会有不同的html代码？

我实际上可以通过以下方式更改标题的文本

$("#collapse").text("new text");

但随后它失去了所有的样式，而且

$("#collapse").trigger('create').

什么都不做。我做错了什么？

Answer 1

要保留小部件的所有样式，最简单的方法是 destroy the widget ，更改标题文本，然后重新初始化小部件:

<div data-role="collapsible" id="collapse">
   <h3 id="collapse-header">I'm a header</h3>
   <p>I'm the collapsible content</p>
</div>

$("#collapse").collapsible( "destroy" );
$('#collapse-header').text('I\'m a new header!');
$("#collapse").collapsible();

DEMO