Apply jquery (mobile) css classes programatically after rendering has occurred

问题

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.

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.

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

BEFORE

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

AFTER

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

回答1:

Chain the .page() to your AJAX call

Example:

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>

回答2:

After looking through jquery.mobile-1.0a4.1.js and reading this great article explaining widget usage the answer was simple:

There is an existing mobile.listview widget which applies the rendering to listviews.

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

});

Apply this to the html directly. It is important to target the ul.

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

Here is the full example

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();
        }
    });
}

回答3:

The .live() (http://api.jquery.com/live/) event binder might be what you're looking for.

来源：https://stackoverflow.com/questions/5589358/apply-jquery-mobile-css-classes-programatically-after-rendering-has-occurred

标签

jquery

css

rendering

widget

jquery-mobile