ランダムな回数ループしている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>
だから私の問題はgallery.phpファイルに追加されたjQueryスクリプトにあります。h4要素のいずれかをクリックすると、jQueryは#gallerylist要素に新しいコンテンツを再読み込みし、デフォルトのアクションを妨げています。最初の数回のクリックでは問題なく動作しますが、「gallery.php」ファイルのスクリプトが何らかの理由でh4要素をクリックせずにループしているように見えます。スクリプトが実行された回数を確認するために「アラート」メッセージを追加しましたが、なぜループしているのか理解できません。
この問題はここで確認できますhttp://www.damianwojtczak.com/avd2/projects.php?cat=All、フィルタリング要素（All、Residentialなど）をクリックしてみてください。スクリプトがアラートとしてループしていることがわかります。数回表示されます。