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