jQuery Mobile创建错误的HTML代码

Question

I'm currently developing a PhoneGap Application for Android using JQuery Mobile. All i want, is to dynamically change the header text of a collapsible:

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

That code is from demos.jquerymobile.com. Chrome DevTools gives me the following html for this example: http://de.tinypic.com/r/2uf982p/8

For any reason, if i copy exactly the same code to my index.html and run it, chrome DevTools gives me the following html: http://de.tinypic.com/r/2wohcf7/8

Why are there different html codes?

I actually can change the header's text by

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

but then it looses all the styling and also

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

doesn't do anything. What am I doing wrong?

Answer 1

You need to target the <h3> tag of the div itself. Consider what you've changed:

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

This replaces all of the text within the collapse id. What you need to do instead is grab the value of the header itself, which can be done as follows:

<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

To keep all the styling of the widget, the easiest way is to destroy the widget , change the heading text and then re-initialize 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