[jQuery] Why do click events stopped after the first one?
I have this code below which I reduced to this for posting.
Essentially, I have a bunch of screen shots which I display in reduced
size as a <div> block "menu" with the idea that when the user clicks
on a image, it is fully displayed in a <DIV id="divImage"> block below
the "image menu."
What is odd is when I have the <DIV id="divImage"> above the "menu",
I've able to click on the images and it will show.
However, if I move the <DIV id="divImage"> below the menu, then the
first click works, but subsequents clicks no longer take.
Why?
Here is the code:
<!-- File: screenshots.htm-->
<html>
<head>
<title>Screen Shots</title>
<script type='text/javascript' src='/public/js/jquery.pack.js'></
script>
<script type='text/javascript'>
$(document).ready(function() {
$(".divLogo img").click(function() {
var $img = $("#divImage img");
$("#divImage").hide();
$img[0].src = this.src;
$("#divImage").show();
});
});
</script>
<style>
.divLogo {
background-repeat: no-repeat;
width: 20%;
float: left;
}
#divImage {
display:none;
position: relative;
z-index: 100;
border: 2px solid black;
}
</style>
</head>
<body>
<H4>Screen Shots</h4>
<div id="divLogoWin">
<div class="divLogo"><img src="ex1.png" border="0" width="100%"></div>
<div class="divLogo"><img src="ex2.png" border="0" width="100%"></div>
<div class="divLogo"><img src="ex3.png" border="0" width="100%"></div>
</div>
<hr>
<div id="divImage"><img src="" border="0" width="100%"/></div>
<hr>
</body>
</html>