javascript - jQuery mobile 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 移动的元素。

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

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

像往常一样，这是工作的 jsFiddle