Question

我有jQuery脚本的问题，它循环随机次数，我不知道为什么。这是我的代码：

    <!DOCTYPE html>

    <html lang="en">

    <head>
    <?php
    include 'head.php'
    ?>
    </head>

    <body>
    <div id="container">

    <!-- Header -->

    <?php
    include 'header.php'
    ?>

    <!-- Navigation Bar -->

    <?php
    include 'navigation.php'
    ?>


  <!-- Gallery section -->

  <section class="articles">

    <h1><a href="projects.php?cat=All">Projects</a></h1>
    <hr>

    <div id="infoblock">

    <?php


    if (!empty($_GET['id'])) {
    require 'info.php';
    }

    else {
      if (!empty($_GET['cat'])) {
        require 'maingallery.php';
      }

      else {
        echo '<p>Database error, please reload your page';
      };
    };

    ?>

    </div>

  </section>

  <!-- Footer -->

  <?php
  include 'footer.php'
  ?>


</div>
   </body>

   </html>

所以我的问题是需要maingallery.php。这是maingallery.php的代码：

    <div id="filterbuttons">
    <h4 class="selected" id="All" href="gallery.php" >All</h4>
    <h4 id="Residential" href="gallery.php?cat=Residential" >Residential</h4>
    <h4 id="Modernisation+%26+Domestic+Extensions" href="gallery.php?cat=Modernisation+%26+Domestic+Extensions" >Modernisation & Domestic Extensions</h4>
    <h4 id="Feasibility+Layouts" href="gallery.php?cat=Feasibility+Layouts" >Feasibility Layouts</h4>
    <h4 id="Master+Planning" href="gallery.php?cat=Master+Planning" >Master Planning</h4>
    </div>


    <ul class="gallery">

    <div id="gallerylist">  
       <?php require 'gallery.php'; ?>
    </div>

    </ul>

这是gallery.php：

    <?php

    if (!empty($_GET)) {
        $cat = urldecode($_GET['cat']);
    }
    else {
        $cat = 'All';
    };

    $dbc = mysqli_connect('server.microlite10.com','XXXXXX','XXXXXX','avd');

    if ($dbc) {
        getGallery($cat, $dbc);
    }
    else {
        echo '<p>Database error, please refresh your screen!</p>';
    };


    function getGallery($cat, $dbc) {
        $r = 'SELECT * FROM Projects';
        $q = mysqli_query($dbc,$r);
        while ( $row = mysqli_fetch_array( $q, MYSQLI_ASSOC) ) {

            if ( $cat == 'All' ) {
                echo '<li class="item">
                <a class="info" href="info.php?id='.$row['id'].'"><img src="'.$row['thumbnail'].'" width="212" height="119" alt="'.$row['name'].'"></a>
                <h2><a class="info" href="info.php?id='.$row['id'].'">'.$row['name'].'</a></h2>
                <h3><a class="cat" href="gallery.php?cat='.urlencode($row['category']).'">'.$row['category'].'</a></h3></li>';   
            }

            else {
                if ( $row['category']==$cat) {

                    echo '<li class="item">
                    <a class="info" href="info.php?id='.$row['id'].'"><img src="'.$row['thumbnail'].'" width="212" height="119" alt="High Tor East, Earl Shilton"></a>
                    <h2><a class="info" href="info.php?id='.$row['id'].'">'.$row['name'].'</a></h2>
                    <h3><a class="cat" href="gallery.php?cat='.urlencode($row['category']).'">'.$row['category'].'</a></h3></li>';

                };    
            };
        };
    }




    ?>
    <script type="text/javascript">



        // Assign $cat value to variable
        // and find relative <h4> element to assign selected class
        var cat = "<?php echo urlencode($cat); ?>";
        alert('script executed');
        $("h4").each(function () {
          var id = $(this).attr('id');
          if (cat == id) {
            $(this).addClass('selected');
          }
          else {
            $(this).removeClass('selected');
          };
        });

        $("li.item:visible").each(function(i) {
            if((i+1)%4==0) $(this).css("margin","30px 0 30px 0px");
            else $(this).css("margin","30px 20px 30px 0");
        });

        $('.cat').bind('click', function(e) {
            var href = $(this).attr('href');
            $('#gallerylist').load(href);
            e.preventDefault();
        });

        $('h4').bind('click', function(e) {
            var href = $(this).attr('href');
            $('#gallerylist').one().load(href);
            var stateObj = { foo : "bar" };
            var newurl = $(this).attr('id');
            history.pushState(stateObj, "", ('http://www.damianwojtczak.com/avd2/projects.php?cat='+newurl));
            e.preventDefault();
        });

        $('.info').bind('click' , function(e) {
            var href = $(this).attr('href');
            $('#infoblock').load(href);
            e.preventDefault();
        });


  </script>

所以我的问题是将jQuery脚本添加到gallery.php文件中。当我点击任何h4元素时，jQuery正在使用新内容重新加载#gallerylist元素，并阻止默认操作。对于前几次点击它工作正常，但看起来像'gallery.php'文件中的脚本由于某种原因而没有点击任何h4元素而循环。我添加了“alert”消息来检查我的脚本执行了多少次，并且无法弄清楚为什么它会循环。

您可以在此处http://www.damianwojtczak.com/avd2/projects.php?cat=All查看此问题，只需尝试点击过滤元素（全部，住宅等），您就会注意到脚本正在循环，因为警报会出现几次。

Answer 1

问题在于，每次使用gallery.php通过ajax加载新图库时，您都会将点击事件重新绑定到.cat和h4 ..您只需要绑定他们应该project.php而不是gallery.php

如果您打开Inspector / Firebug并查看Net选项卡，您将看到单击其中一个H4会导致发出多个GET请求（增加您在库之间切换的次数越多）。由于gallery.php的响应包含脚本标记，因此其中的所有JS都在执行。

将<script>标记移出gallery.php并进入project.php

jQuery脚本因未知原因而循环

1 个答案: