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

2022-01-18 00:00:00 widget rendering jquery css jquery-mobile

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 移动 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>

相关文章