下划线模板中未应用jQuery Mobile CSS样式

Question

I am trying to use jQueryMobile styling on elements inside of an underscore template. It seems like the styling should get applied as it shows up in the computed styles but it is not being applied. On the other hand, my own CSS definition does get applied. Please can anyone tell me what I am doing wrong here?

Underscore Template:

<script type="text/template" id="test-template">
    <!-- jQueryMobile Styling does not work here... -->
    <a href="#" id="button2" data-role="button" data-icon="arrow-r" data-iconpos="right">Button 2 (jquery style doesn't work)</a>
    <a href="#" id="button3" data-role="button" data-icon="arrow-r" data-iconpos="right">Button 2 (local css style works)</a>
</script>

JavaScript:

$("#app-content").html(_.template($('#test-template').html()));

CSS:

#button3 {
    background-color: red;
}

Please see my jsfiddle here: http://jsfiddle.net/DanielBank/WJzTn/

Answer 1

Inheritly, jQuery Mobile doesn't apply styles to dynamically injected elements. You will need to call .trigger('create') on the elements to create jQuery mobile based elements.

$("#app-content").html(_.template($('#test-template').html())).trigger('create')

Will ensure that the buttons receive the proper styles.

As usual, Here's the working jsFiddle