jQuery Mobile creating a Collapsible set dynamically via ajax does not apply styling [duplicate]

问题

This question already has answers here:

Closed 7 years ago.

Possible Duplicate:
Dynamically adding collapsible elements

I am dynamically creating a Collapsible set and adding it to the page using $('#myID').html(htmlcode). The styling is not being applied to the page. How can I get jQUery mobile to apply it styling?

(I am using $.get() to query a web service.The content that returned I am looping through to create the markup)

回答1:

This is working for me. My ajax returns a bunch of h3's which I insert into a collapsible div and append a p tag for the content.

$(document).ready(function(){

    $.get(my_url, function(data) {
        var content = $('div[data-role="content"]').html(data);
        $('h3').each(function(h3_element) {
            var coll = $('<div class="ui-collapsible-contain" name="blog"  data-role="collapsible" data-collapsed="true">');
            coll.append($(this));
            coll.append($('<p>'));
            content.append(coll);
        });
        content.trigger( "create" );        
    });

});

回答2:

Already answered in Jquery Mobile Collapsible Content

To initialize your div correctly after preventing the default init formating, you'll have to use something like $("a way to select your div").trigger('create'); as specified here: http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-scripting.html

回答3:

$content.find(":jqmData(role=collapsible)").collapsible();

回答4:

Collapsible content and Ajax loading

来源：https://stackoverflow.com/questions/7218001/jquery-mobile-creating-a-collapsible-set-dynamically-via-ajax-does-not-apply-sty