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文件保持簡短。如果有要求，會做。感謝您的時間。