javascript - 下划线模板中未应用 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 不会将样式应用于动态注入(inject)的元素。您需要对元素调用 .trigger('create') 以创建基于 jQuery Mobile 的元素。

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

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

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