Event bubbling with img tags?
<p>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.</p>

<p>Basically, I have this small code snippet:</p>

<pre><code>$('.bggallery_images').click(function () {      
    alert('test');      
});
</code></pre>

<p>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". </p>

<p>PHP snippet looks like this:</p>

<pre><code>                    &lt;?php
                    $dirname = "img";
                    $images = scandir($dirname);
                    $ignore = Array(".", "..");
                    foreach($images as $file)
                        {
                        if(!in_array($file, $ignore))
                            {                                                           
                                echo "&lt;img class=\"bggallery_images\" src=\"$dirname/$file\" /&gt;";                                                               
                            };
                        }  
                    ?&gt;  
</code></pre>

<p>This all generates the html markup that looks like this for each image:</p>

<pre><code>&lt;img src="img/WhitePattern6.gif" class="bggallery_images"&gt;
</code></pre>

<p>What is happening here?</p>

<p>Here's the rendered output from FireBug:</p>

<pre><code>&lt;div id="gallery_lightbox" style="height: 215px; z-index: 4; display: block;"&gt;
                    &lt;div id="close"&gt;&lt;/div&gt;
                        &lt;h2&gt;&lt;cufon class="cufon cufon-canvas" alt="Velg " style="width: 39px; height: 20px;"&gt;&lt;canvas width="49" height="23" style="width: 49px; height: 23px; top: -4px; left: 0px;"&gt;&lt;/canvas&gt;&lt;cufontext&gt;Velg &lt;/cufontext&gt;&lt;/cufon&gt;&lt;cufon class="cufon cufon-canvas" alt="bakgrunnsbilde" style="width: 123px; height: 20px;"&gt;&lt;canvas width="129" height="23" style="width: 129px; height: 23px; top: -4px; left: 0px;"&gt;&lt;/canvas&gt;&lt;cufontext&gt;bakgrunnsbilde&lt;/cufontext&gt;&lt;/cufon&gt;&lt;/h2&gt;
                        &lt;div class="bggallery_images"&gt;testererererer&lt;/div&gt;
                        &lt;img src="img/Bakgrunner/4462-v4.jpg" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/5922.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/BluePattern.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/Brown1.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/Brown2Pattern.jpg" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/BrownPattern.jpg" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/Brownn.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/GrayPattern.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/GreenPattern3.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/OrangePattern.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/PurplePattern.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/PurplePattern2.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/RedPattern3.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/RedPattern4.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/RedPattern5.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/Tiled_Wallpaper__Green_Texture_by_knitetgantt.png" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/WhitePattern4.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/WhitePattern5.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/WhitePattern6.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/WhitePattern7.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/WhitePurple.jpg" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/YellowPattern.gif" class="bggallery_images"&gt;&lt;img src="img/Bakgrunner/vintage-wallpaper.jpg" class="bggallery_images"&gt;  
                     &lt;/div&gt;
</code></pre>

<p>Edit: Here's the js.js file basically. I didn't include the kwicks slidemenu script though.</p>

<pre><code>/* ********************************************** */
/* DOCUMENT READY */
/* ********************************************** */

$(document).ready(function () {
    bg_gallery();

});

/* ********************************************** */
/* Background gallery changer */
/* ********************************************** */

function bg_gallery() {

        // Sett nytt bakgrunnsbilde i CSSen 
        var originalBG = $('#wrapper').css('background-image');             

        $('.bggallery_images').click(function () {  
            var newBG = "url('" + $(this).attr('src');
            var fullpath = $(this).attr('src');
            var filename = fullpath.replace('img/Bakgrunner/', '');

            $('#wrapper').css('background-image', newBG);
            alert('test');

            // Lagre til SQL
            /*alert('Test');
            $.ajax({
                url: 'save_to_db.php', // The url to your function to handle saving to the db
                data: filename,
                dataType:'Text',
                type: 'POST',  // Could also use GET if you prefer
                success: function(data) {
                    // Just for testing purposes.
                    //alert('Background changed to: ' + data);
                }           

            });*/

    });     
        // Få frem galleriet

    $('.bggallery_current_image').click(function () {

        $('html, body').animate({scrollTop:0}, 'slow');
        $('#gallery_lightbox').css('height','215px'); // Sett høyde på lightbox-dings
        $('#gallery_lightbox').css('z-index','4'); // Sørg for at boksen er i øverste lag

        $('body').append('&lt;div id="bggallery_overlay"&gt;&lt;/div&gt;');
        $('#bggallery_overlay').css('height', $(document).height ());
        $('#bggallery_overlay').css('width', $(document).width ());     

        $('#bggallery_overlay').fadeIn('fast',function(){$('#gallery_lightbox').fadeIn('slow');});

    });

     $('#close').click(function () {
         $('#bggallery_overlay').fadeOut('fast',function(){$("#bggallery_overlay").remove();}); //callback, vent
         $('#gallery_lightbox').fadeOut('slow');


    });
};


/* ********************************************** */
/* Content loader (swoosh ut-swosh inn) */
/* ********************************************** */

/* Load kun fra dynload-klasser, må wrappe en div f. eks rundt slike a href linker */

$('.dynload').die('click').live('click', function () {
    $('#ajaxloader').fadeIn('fast');
    $('#ajaxloaderfridge').fadeIn('fast');
    var href = this.href + ' #content';
    var height_initially = $('#container').height();
    $('#content').slideUp('fast', function () {

        $('#content').fadeOut('fast');
        var height_current = $('#container').height();

        $(this).load(href, '', function (data) {
            createSlidemenus();
            bg_gallery();
            $('#ajaxloader').fadeOut('fast');
            $('#ajaxloaderfridge').fadeOut('fast');

            $("#content").animate({
                height: 'show',
                opacity: 'show'
            }, 'normal');

            $('#content').show('fast');

            Cufon.replace('h1, h2, h3, h4, .menuwrapper', {
                fontFamily: 'advent'
            });
        });
    });
    return false;
});

$(createSlidemenus);

function createSlidemenus() {
    $('#kontrollpanel .slidepanels').kwicks({
        min: 42,
        spacing: 3,
        isVertical: true,
        sticky: true,
        event: 'click'
    });
}
</code></pre>
