jQuery手机CSS样式不应用在下划线模板

Question

我想在下划线模板的内部元素上使用jQueryMobile样式。它看起来像样式应该得到应用，因​​为它显示在计算的样式中，但它没有被应用。另一方面，我自己的CSS定义得到应用。请任何人都可以告诉我我在这里做错了什么？

下划线模板：

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

请参阅我的jsfiddle这里： http://jsfiddle.net/DanielBank/WJzTn/

Answer 1

继承，jQuery Mobile不会将样式应用于动态注入的元素。您需要在元素上调用.trigger('create')来创建基于jQuery mobile的元素。

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

将确保按钮接收正确的样式。

像往常一样，Here's the working jsFiddle