jquery-ui - jquery mobile内部页面的ajax实现

Question

我在 stackover 中制作了一个内部页面 jquery mobile ive 搜索问题，但这些问题与我的不相似。我想知道是否可以使用 ajax 加载内部页面。我想加载我的 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-->

Answer 1

如果您想将 jquery 移动页面加载为 AJAX，

你的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页面

您可以将其用于元素的 onclick。