呈现后以编程方式应用 jquery (mobile) css 类

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 移动 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 类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！