jquery mobile loadPage not working

问题

well, i did this question fill days ago, but dont know if i was clear.

so, i made something more simple now using another function $.mobile.loadPage

what i'm trying to do is just load a content from another file to a div, just like $.ajax using normal jquery.

in my main page:

<div data-role="page">
    <button id="load" style="border: solid blue;">Click here to load</button>
    <div data-role="content" id="target">
    <!-- ajax load here -->
    </div>
</div>

this is the html from another file:

<div id="secondPage" style="border:solid red;">
   <p>test</p>
</div>

and finally, the js:

 $("body").on("click", "#load", function () {
    $.mobile.loadPage("mobile/favorites", {
        pageContainer: $('#target'),
        type: 'post',
        reloadPage: true
    });
});

no erros appears to me, the url load the content as i checked in the chrome debug.

so, what i'm missing ?

回答1:

Your code is attempting to load one page within another page. The second page (id="secondPage") is missing is data-role="page" attribute.

I have never tried to accomplish what you are attempting here but it seems confusing based on the docs.

The method loads a page, inserts it in the DOM inside of a container (not another page). The reloadPage parameter forces the loaded page to refresh if it is already in the DOM (having previously been loaded). Not what you want to do.

You will have better luck loading content via jQuery, inserting into the DOM $("#myDiv").load("ajax/test.html"); and then refreshing the current page with $("#myPage").page("destroy").page(); Note that this last bit may not be needed if you are simply inserting html that is not enhanced by jQuery Mobile.

来源：https://stackoverflow.com/questions/13453511/jquery-mobile-loadpage-not-working