Javascript JQuery Mobile创建了错误的HTML代码

我目前正在使用JQuery Mobile为Android开发PhoneGap应用程序。 我只想动态更改可折叠文件的标题文本：

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

但随后它放松了所有的造型，而且

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

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

您需要以div本身的标记为目标。考虑一下你改变了什么：

$collapse.text新文本

这将替换折叠id中的所有文本。您需要做的是获取标题本身的值，具体操作如下：

<div data-role="collapsible" id="collapse">
   <h3 id="collapse-header">I'm a header</h3>
   <p>I'm the collapsible content</p>
</div>
<script>
    $('#collapse-header').text('I\'m a new header!');
</script>

---

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

<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();

---

这也会改变文本，但所有样式的lostI似乎都没有这个问题。看看这个例子。如果您仍然有问题，我建议您自己创建一个，这样我们就可以看到问题所在。然后所有的样式都丢失了。但在我的例子中，这并不重要，我在哪里编写jQuery代码，在更改itTry以将什么放入外部js后，它总是看起来很糟糕？您需要的所有库都已加载。任何其他的改变都应该在小提琴内部完成。

<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();