Jquery ui jquerymobile内部页面的ajax实现

我在stackover中提出了一个内部页面jquery mobile ive搜索问题，但这些问题与我的不同。我想知道是否可以使用ajax加载内部页面。我想在about页面中加载about1页面和about2页面这是我的示例代码：

<!-- start about -->
    <div data-role="page" id="about" data-url="about" data-theme="a">
            <div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
                 <h3 class="ui-title"  >
                            Header
                        </h3>
                <!-- working back button <a href="javascript:history.go(-1)">go back</a> -->
                 <a data-role="button"  data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
                            Back
                            </span></span></a>
                 <a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
                            Home
                            </span></span></a>
            </div>
            <div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" >
                 <h1 class="ui-title"  >About</h1>

            </div>
            <!-- start ajax -->
                <ul data-role="listview" data-theme="a" id="mylist" class="ui-listview">
                    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right ui-li-has-arrow ui-li ui-screen-hidden">
                        <div class="ui-btn-inner ui-li">
                        <div class="ui-btn-text">
                        <a href="#about" class="ui-link-inherit" data-transition="fade">about</a>
                        </div>
                        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;
                        </span>
                        </div>
                    </li>
                    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a">
                        <div class="ui-btn-inner ui-li">
                        <div class="ui-btn-text">
                        <a href="#about1" class="ui-link-inherit" data-transition="pop">about</a>
                        </div>
                        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
                        </div>
                    </li>                
                        <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-last ui-btn-up-a">
                        <div class="ui-btn-inner ui-li">
                        <div class="ui-btn-text">
                        <a href="#about2" class="ui-link-inherit" data-transition="turn">about2</a>
                        </div>
                        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
                        </div>
                    </li>
                </ul>
            <!-- end ajax -->
             <div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
                 <h3 class="ui-title"  >Footer</h3>
            </div>
    </div>
    <!-- end about -->
    <!-- start about1 -->
    <div data-role="page" id="about1" data-url="about1">
            <div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
                 <h3 class="ui-title"  >
                            Header
                        </h3>
                <!-- working back button <a href="javascript:history.go(-1)">go back</a> -->
                 <a data-role="button"  data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
                            Back
                            </span></span></a>
                 <a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
                            Home
                            </span></span></a>
            </div>
            <div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" >
                 <h1 class="ui-title"  >About1</h1>

            </div>
             <div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
                 <h3 class="ui-title"  >Footer</h3>
            </div>
        </div>
    <!-- end about1 -->
        <!-- start about2 -->
    <div data-role="page" id="about2" data-url="about2">
                <div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
                 <h3 class="ui-title"  >
                            Header
                        </h3>
                <!-- working back button <a href="javascript:history.go(-1)">go back</a> -->
                 <a data-role="button"  data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
                            Back
                            </span></span></a>
                 <a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
                            Home
                            </span></span></a>
            </div>
            <div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" >
                 <h1 class="ui-title"  >About2</h1>
            </div>
             <div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
                 <h3 class="ui-title"  >Footer</h3>
            </div>
        </div>
    <!-- end about2-->

标题
关于








页脚
标题
大约1
页脚
标题
大约2
页脚

如果您想以

AJAX

的方式进行jquery移动页面加载

您的

AJAX

应该是

$( "#your_success_ele_id1" ).load( "about1.html", function() {
     $('#your_success_ele_id1').trigger('create');
});
$( "#your_success_ele_id2" ).load( "about2.html", function() {
     $('#your_success_ele_id2').trigger('create');
});

应该使用

trigger（'create'）

，否则您将得到一个正常的html页面

---

你可以用它点击一个元素。

是的，你可以通过

AJAX

加载jquery移动页面，你试过了吗？是的，我试过了，但失败了。你能告诉我怎么做吗？意味着你得到的是html，但不是jquery移动页面，rt？我想做jquery mobile，但我只是刚开始使用jquery mobile，我不知道怎么做。我试过如何使用外部页面实现ajax，但不起作用：）使用

ajax

，你得到html内容了吗？这个ajax是用于内部的吗？因为我不知道在url中放什么，因为我只是用了一个标记，所以我加载了一个页面。好的，我仍然不知道应该加载哪个分区。我没有得到这个$（“#你的成功(ele)id1”）和这个$（#你的成功(ele)id2）

your_success_ele_id1

和

your_success_ele_id2

是要加载

html

页面的

div

s

id