渲染发生后以编程方式应用 jquery（移动）CSS 类

Question

jquery mobile 将根据数据自动为页面上的元素应用 css 和一些 html页面加载时属性就在它们上面。

我通过 ajax 调用拉入一些 html 内容，但它是在 jquery mobile js 渲染发生后引入到页面的，因此无法获取许多 css 类。

是否可以只调用 js 并要求将渲染应用于我的新 html 内容？

之前

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

Answer 1

将 .page() 链接到您的 AJAX 调用

示例：

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>

Answer 2

查看 jquery.mobile-1.0a4.1.js 并阅读 this 后很棒的文章解释了小部件的用法，答案很简单：

有一个现有的 mobile.listview 小部件，它将渲染应用于列表视图。

$.widget( "mobile.listview", $.mobile.widget, {

});

直接将其应用到 html 中。 定位 ul 非常重要。

$("div#someDiv ul").listview();

这是完整的例子

function hijack(form) {
    $("div#someDiv").html("");
    $("div#someDiv").addClass('loading');

    $.ajax({
        url: form.action,
        type: form.method,
        dataType: "html",
        data: $(form).serialize(),
        success: function(data) {
            $("div#someDiv").removeClass('loading');
            $("div#someDiv").html(data);

            //apply rendering of jquery mobile styles via listview widget
            $("div#someDiv ul").listview();
        }
    });
}

Answer 3

.live() (http://api.jquery.com/live/) 事件绑定器可能就是您正在寻找的。