2

我在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-->
4

1 回答 1

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。

于 2013-10-03T04:27:58.173 回答