Question

我有一个关于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，因为它与contact.html或css文件一样，以保持简短。如果要求将会做。谢谢你的时间。

Answer 1

委派概念可能存在问题。

当您导航回主页时，您的网页内容会动态设置，因此会丢失事件监听器。

为了避免这种情况，正如NeuTronas所提到的，你必须使用委托来声明你的事件监听器。

事件监听器没有委派

$( '.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?

Answer 2

使用

$(document).on('click','.buttons',function(e){

而不是：

$( '.buttons' ).on('click', function(e){

使用Ajax

2 个答案: