如何使用jquery mobile将外部html内容加载到页面内的div中



当前页面标记的一部分。

<div class="que-plc">
<div class = "questionHolder">
<div class = "questionBorder">
<h3>A question?</h3>
<div>
<div ><a id="goto-que1" class="to-next-que">NEXT</a></div>
</div>
</div>
</div>
</div>

必须加载到当前页面的标记:

HTML -- que1.html:
<div class = "questionHolder"> 
<div class = "questionBorder">
<h3>Question Here?</h3>
<div data-type="horizontal">
<div><a id="goto-que2" data-role="button" class="to-next-que">NEXT</a></div>
</div>  
</div>
</div>
HTML -- que2.html:
<div class = "questionHolder"> 
<div class = "questionBorder">
<h3>Question Here?</h3>
<div data-type="horizontal">
<div><a id="goto-que3" data-role="button" class="to-next-que">NEXT</a></div>
</div>  
</div>
</div>

加载 que1.html 和 que2.html 的 javascript:

$("a.to-next-que").click(function(){
alert(this.id)
var cur_id = this.id.toString();
$(".questionHolder").remove();
var last = cur_id.length
cur_id = cur_id[last - 1];
$.get('level/level1/que'+cur_id+'.html',function(question) {
$('.que-plc').html(question).trigger('create');
});
});

问题是在que1.html加载到dom i,e内部的dom i,e之后。que-plc容器中,则连续单击不会加载que2.html, que3.html ... to the dom。发生了什么事情?

我正在使用jquery-mobile 1.0.1,因此使用$.mobile.loadPage,$.mobile.changePage会导致错误。

而且从page1.html to page2.html通过a link whose data-ajax="false"导航不会加载page2.html中的JavaScript

那是:

<body>
<div data-role="page">
</div>
<script src="play.js"></script>

该剧.jswont be available in第2.html页。如何纠正这种情况?

你可以这样使用

$('#div_content').load("page.html");

单击按钮时加载页面

$('#button').click(function(){   
$('#div_content').load('html.page');
});

最新更新