Event bubbling with img tags?
- by Kenny Bones
I did some googling and figured I'm probably experiencing so called "event bubbling" that I've never heard of but are not surprised by it's existance. I want it to fire only once and I'm wondering how to fix this.
Basically, I have this small code snippet:
$('.bggallery_images').click(function () {
alert('test');
});
This is supposed to fire once from a php snippet that basically adds an image of each image from a specific folder. It then outputs an echo string where each image has the class of "bggallery_images".
PHP snippet looks like this:
<?php
$dirname = "img";
$images = scandir($dirname);
$ignore = Array(".", "..");
foreach($images as $file)
{
if(!in_array($file, $ignore))
{
echo "<img class=\"bggallery_images\" src=\"$dirname/$file\" />";
};
}
?>
This all generates the html markup that looks like this for each image:
<img src="img/WhitePattern6.gif" class="bggallery_images">
What is happening here?
Here's the rendered output from FireBug:
<div id="gallery_lightbox" style="height: 215px; z-index: 4; display: block;">
<div id="close"></div>
<h2><cufon class="cufon cufon-canvas" alt="Velg " style="width: 39px; height: 20px;"><canvas width="49" height="23" style="width: 49px; height: 23px; top: -4px; left: 0px;"></canvas><cufontext>Velg </cufontext></cufon><cufon class="cufon cufon-canvas" alt="bakgrunnsbilde" style="width: 123px; height: 20px;"><canvas width="129" height="23" style="width: 129px; height: 23px; top: -4px; left: 0px;"></canvas><cufontext>bakgrunnsbilde</cufontext></cufon></h2>
<div class="bggallery_images">testererererer</div>
<img src="img/Bakgrunner/4462-v4.jpg" class="bggallery_images"><img src="img/Bakgrunner/5922.gif" class="bggallery_images"><img src="img/Bakgrunner/BluePattern.gif" class="bggallery_images"><img src="img/Bakgrunner/Brown1.gif" class="bggallery_images"><img src="img/Bakgrunner/Brown2Pattern.jpg" class="bggallery_images"><img src="img/Bakgrunner/BrownPattern.jpg" class="bggallery_images"><img src="img/Bakgrunner/Brownn.gif" class="bggallery_images"><img src="img/Bakgrunner/GrayPattern.gif" class="bggallery_images"><img src="img/Bakgrunner/GreenPattern3.gif" class="bggallery_images"><img src="img/Bakgrunner/OrangePattern.gif" class="bggallery_images"><img src="img/Bakgrunner/PurplePattern.gif" class="bggallery_images"><img src="img/Bakgrunner/PurplePattern2.gif" class="bggallery_images"><img src="img/Bakgrunner/RedPattern3.gif" class="bggallery_images"><img src="img/Bakgrunner/RedPattern4.gif" class="bggallery_images"><img src="img/Bakgrunner/RedPattern5.gif" class="bggallery_images"><img src="img/Bakgrunner/Tiled_Wallpaper__Green_Texture_by_knitetgantt.png" class="bggallery_images"><img src="img/Bakgrunner/WhitePattern4.gif" class="bggallery_images"><img src="img/Bakgrunner/WhitePattern5.gif" class="bggallery_images"><img src="img/Bakgrunner/WhitePattern6.gif" class="bggallery_images"><img src="img/Bakgrunner/WhitePattern7.gif" class="bggallery_images"><img src="img/Bakgrunner/WhitePurple.jpg" class="bggallery_images"><img src="img/Bakgrunner/YellowPattern.gif" class="bggallery_images"><img src="img/Bakgrunner/vintage-wallpaper.jpg" class="bggallery_images">
</div>
