在渲染发生后以编程方式应用jquery（mobile）css类 [英] Apply jquery (mobile) css classes programatically after rendering has occurred

问题描述

jquery mobile 会根据 data- 自动应用css和一些html元素， / strong>属性在页面加载时。

jquery mobile will automatically apply css and some html for elements on the page based on what data- attributes are on them when the page loads.

我通过ajax调用拉取一些html内容，但它被引入到jquery mobile js后的页面渲染已经发生，因此没有得到很多css类。

I am pulling in some html content via an ajax call but it is introduced to the page after the jquery mobile js rendering has occurred, and therefore does not get the many css classes.

有可能只调用js并要求渲染才能应用于我的新的html内容？

Is it possible to just call out to the js and ask for the rendering to get applied to just my new html content?

之前

<div id="someDiv">
    <ul data-role="listview" data-theme="b" data-inset="true">          
            <li>
                <a href="#">
                    <h3>
                        Some title
                    </h3>
                    <p>
                        Some text
                    </p>
                </a>
            </li>
    </ul>
</div>

之后

<div id="someDiv">
    <ul data-role="listview" data-theme="b" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">          
        <li data-theme="b" class="ui-btn ui-btn-icon-right ui-li ui-corner-top ui-corner-bottom ui-btn-up-b">
            <div class="ui-btn-inner ui-li ui-corner-top ui-corner-bottom">
                <div class="ui-btn-text">
                    <a href="#" class="ui-link-inherit">
                        <h3 class="ui-li-heading">
                            Some title
                        </h3>
                        <p class="ui-li-desc">
                            Some text
                        </p>
                    </a>
                </div>
                <span class="ui-icon ui-icon-arrow-r"></span>
            </div>
        </li>
    </ul>
</div>

推荐答案

链接 .page ）到您的AJAX调用

Chain the .page() to your AJAX call

示例：

var parm = '123';

function loadPage(page){    
    $.ajax({
        url: 'page.php?parm='+value,
        type: 'POST',
        error : function (){ document.title='error'; },
        success: function (data) {                  
            $('#placeholder').html(data).page();
        }
    });
    // Scrolls to the top of the page
    $.mobile.silentScroll(0);
}

HTML

<div name="placeholder" id="placeholder"><!-- This is the placeholder --></div>

这篇关于在渲染发生后以编程方式应用jquery（mobile）css类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！