JQuery 移动设备创建了错误的 HTML 代码

Question

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

<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 代码不同？

我实际上可以通过

更改header的文本

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

但随后它失去了所有样式并且

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

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

Answer 1

您需要定位 div 本身的 <h3> 标签。考虑一下您所做的更改：

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

这将替换折叠 ID 中的所有文本。您需要做的是获取 header 本身的值，可以按如下方式完成：

<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>

Answer 2

要保留小部件的所有样式，最简单的方法是 destroy the widget，更改标题文本，然后 re-initialize 小部件：

<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

JQuery 移动设备创建了错误的 HTML 代码

JQuery Mobile creates wrong HTML code

html

javascript

css

jquery

jquery-mobile