编辑 斜体 = 为问题添加了更详细的解释。谢谢。
我正在构建一个 jQuery Mobile 网站，其中有一个图库部分。 图库在屏幕顶部有一系列缩略图。 用户单击缩略图加载新内容，即更大的图像、文本，其中一些内容可能还包含音频。
此时我不确定该怎么做:jQuery Mobile 的工作方式是加载新页面或 View 。但我只想在当前页面上的容器中注入(inject)新内容。
需要明确的是，当用户单击另一个缩略图时，新图像会用新内容替换容器的内容。
我有两个问题: 我不确定如何构建动态内容。我想为每个项目创建一个 html 文件，通常包含标题、信息，有时还包含音频。
我不确定如何在 jQuery Mobile 中编写此功能的脚本。它显然是 Ajax，但我还不熟悉它，特别是因为 jQuery Mobile 已经有了自己的方法，这似乎以与此处描述的方法相矛盾的方式重新定义了行为。
这是我正在尝试执行的操作的代码说明:
<!-- Galleries -->
<div data-role="page" id="galleries">
<div data-role="content" role="main">
This is the Selection UI, if i click on thumb2.jpg, it'd
fill #content-holder with the whatever html is in content2.php
<div id="thumb-carousel">
<a href="content1.php"><img src="thumb1.jpg"></a>
<a href="content2.php"><img src="thumb2.jpg"></a>
<a href="content3.php"><img src="thumb3.jpg"></a>
<a href="content4.php"><img src="thumb4.jpg"></a>
<a href="content5.php"><img src="thumb5.jpg"></a>
<a href="content6.php"><img src="thumb6.jpg"></a>
<a href="content7.php"><img src="thumb7.jpg"></a>
<a href="content8.php"><img src="thumb8.jpg"></a>
<a href="content9.php"><img src="thumb9.jpg"></a>
</div>
<!-- This is the container, currently it's filled
with the kinda stuff i need to put in it. -->
<div id="content-holder">
<img src="myimage1.jpg"/>
<p>Artwork Title</p>
<p>Caption</p>
<audio>//mp3</audio>
</div>
</div>
</div>
最佳答案
//remember to use event delegation because you never know when the page will be in the DOM
$(document).delegate('#galleries', 'pageinit', function () {
//bind a `click` event handler to each thumbnail link
$('#thumb-carousel').children().bind('click', function () {
$.ajax({
url : $(this).attr('href'),
success : function (serverResponse) {
//select the container,
//then fade it out,
//change it's HTML to the response from the AJAX request,
//and fade it back in
$('#content-holder').fadeOut(500, function () {
$(this).html(serverResponse).fadeIn(500);
});
},
error : function (jqXHR, textStatus, errorThrown) {
//remember to handle errors so your page doesn't seem broken to the user
}
});
//prevent the default behavior of the link, which is to navigate to the `href` attribute
return false;
});
});
这期望您的服务器响应是已准备好注入(inject) DOM 的有效 HTML 标记，这意味着没有 <html>或<body>标签，正是您想要添加到 DOM 的内容:
<img src="..." />
<span>TITLE</span>
<audio src="..."></audio>
这里有一些文档供您引用:
-
$.ajax(): http://api.jquery.com/jquery.ajax -
.closest(): http://api.jquery.com/closest -
.fadeIn(): http://api.jquery.com/fadein
关于ajax - 在同一页面中动态插入内容而不是转到新页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9537699/