2013-02-09 44 views
0

我有jQuery腳本循環隨機次數的問題,我不知道爲什麼。這裏是我的代碼: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,只是嘗試點擊過濾元素(所有,住宅等),你會注意到腳本循環,因爲警報出現幾次。

回答

1

的問題是,每次你使用gallery.php加載通過AJAX一個新的畫廊,你點擊的事件再結合.cath4 ..你只需要一次綁定他們,你應該project.php這樣做,而不是gallery.php

如果您打開Inspector/Firebug並查看Net選項卡,您會看到單擊其中一個H4會導致發出多個GET請求(增加您在畫廊之間切換的次數越多)。由於來自gallery.php的響應包含腳本標記,因此其中的所有JS都正在執行。

<script>標記移出gallery.php並放入project.php

+0

完美!解決了這個問題。謝謝 – Guferos 2013-02-09 16:47:08