1
我对第一次使用的Ajax有疑问。 我的项目由一个链接到网站不同部分的菜单组成。在主页上有最简单的照片查看器，两个可点击的图标可以浏览图片。然后，当用户点击不同的链接，ajax显示不同的部分：联系人，画廊，联系人等...当使用Ajax返回加载的内容时，功能无法正常工作
我的问题是，当一个点击回到“家”按钮，并面临着照片查看器，可点击的图标不再允许您浏览图片。 因为我对Ajax没有任何经验，所以我不太确定这是为什么。 JavaScript仅在您加载网站时第一次使用照片查看器呈现，但一旦使用ajax再次加载内容后，似乎不会再读取。
下面是代码：
的index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="header">
<div id="title"><h1>TITLE<span id="subtitle">SUBTITLE</span></h1></div>
<nav class="cf" id="menu">
<ul>
<li><a href="about.html">ABOUT</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="bio.html">BIO</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="index.html" class="current">HOME</a></li>
</ul>
</nav>
</div>
<section id="content">
<div id="container">
<div id="imagewrap">
<img src="Images/Images/Image1.jpg" id="front" />
<div id="previous" class="buttons"></div>
<div id="next" class="buttons"></div>
</div>
</div> <!-- end of content -->
</section> <!-- end of container -->
<div id="footer">
</div>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
</body>
</html>
的.js
$(document).ready(function() {
$("#imagewrap").hide();
function showPicture() {
$("#imagewrap").fadeIn('slow');
}
setTimeout(showPicture, 2000);
$("nav a").on('click', function(e){
e.preventDefault();
var url = this.href;
$("nav a.current").removeClass("current");
$(this).addClass("current");
$('#container').remove();
$('#content').load(url + ' #content').hide().fadeIn('slow');
});
counter = 1;
$('.buttons').on('click', function(e){
if (counter < 1 || counter > 5) {return false;}
var id = e.target.id;
if (id == "next" && counter < 5){counter++;
} else if (id == "previous" && counter > 1){counter--;}
getImage();
});
getImage = function() {
document.getElementById("front").src = "Images/Images/Image" + counter + ".jpg";
}
});
contact.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<section id="content">
<div id="container">
<div id="contact" class="sections">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia odit culpa excepturi itaque hic laborum odio nam deserunt ipsum dolor rerum repudiandae, quidem voluptatem nisi numquam tempora vel consequuntur harum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam ut error consectetur eum delectus porro dolore repellendus quidem! Ad, dignissimos minus debitis nam sunt aliquid eius quam cum, omnis magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe vero ducimus reprehenderit quibusdam esse sed, porro pariatur illum natus tempore? Iste laborum odio deleniti molestias praesentium delectus repudiandae consequatur corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est fugit provident, labore expedita nostrum laborum nesciunt! Assumenda inventore repudiandae dignissimos animi autem, dolorem sint, incidunt officia quam porro, perspiciatis fuga.</p>
</div>
</div> <!-- end of content -->
</section> <!-- end of container -->
</body>
</html>
我不是张贴了的HTML其他内容与t一样他contact.html或css文件保持简短。如果有要求，会做。感谢您的时间。