我在堆栈中制作内部页面jquery mobile ive搜索问题,但这些与mine.i想要知道是否可以在加载内部页面时使用ajax。我想加载我的about1页面和约2页面在这里的约会页面是我的示例代码:
<!-- 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">
</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"> </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"> </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-->
答案 0 :(得分: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。