我有一个关于 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";
}
});
联系人.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，因为它与 contact.html 或 css 文件一样，以保持简短。如果需要，会做。感谢您的宝贵时间。
最佳答案
这可能是委托(delegate)概念的问题。
当您导航回主页时，您的网页内容是动态设置的，因此，您会失去事件监听器。
为了避免这种情况，正如 NeuTronas 所提到的，您必须使用委托(delegate)声明您的事件监听器。
事件监听器没有委托(delegate)
$( '.buttons' ).on('click', function(e){
// Will work only for element, with .buttons class, that have been created when accessing the webpage
})
事件监听器具有授权
$( document ).on('click', '.buttons', function(e){
// Will work for all element with .buttons class, including those dynamically created
})
如果您仍然感到困惑，请查看此主题:Event binding on dynamically created elements?
关于javascript - 使用 Ajax 返回加载的内容时功能不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43541902/