Img etiketleri ile köpüren bir olay?

3 Cevap php

Bazı googling yaptım ve muhtemelen ben hiç duymadım ama varlığı bulunuyor sürpriz değil sözde "köpüren bir olay" yaşıyorum düşündüm. Ben sadece bir kez ateş etmek istiyorum ve ben bu sorunu çözmek için nasıl merak ediyorum.

Temelde, ben bu küçük kod parçacığını var:

$('.bggallery_images').click(function () {      
    alert('test');      
});

Bu temelde, belirli bir klasördeki her görüntünün bir görüntü katan bir php pasajı ikinci kez ateş etmek gerekiyordu. Daha sonra her bir görüntü "bggallery_images" sınıfına sahip bir yankı dize verir.

PHP pasajı şöyle:

                    <?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\" />";                                                               
                            };
                        }  
                    ?>

Bu, bütün her görüntü için bu gibi görünüyor html biçimlendirme oluşturur:

<img src="img/WhitePattern6.gif" class="bggallery_images">

Ne oluyor burada?

İşte Kundakçı gelen render çıktısı bulunuyor:

<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>

Düzenleme: İşte js.js temelde dosyası bulunuyor. Ama kwicks SlideMenu senaryoyu içermiyordu.

/* ********************************************** */
/* 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('<div id="bggallery_overlay"></div>');
        $('#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'
    });
}

3 Cevap

Olay köpüren netleştirmek için aşağıdaki linki kontrol: http://www.quirksmode.org/js/events_order.html

Sadece olay işleyicisi "false" iade ederek köpüren önleyebilirsiniz:

$('.bggallery_images').click(function () {      
    alert('test');
    return false;
});

Edit: This code works without producing two alerts so it must be something external to this.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
    <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="http://google.com/images/srpr/nav_logo13.png" class="bggallery_images"/>
        <img src="http://google.com/images/srpr/nav_logo13.png" class="bggallery_images"/>
    </div>

    <script type="text/javascript">
        $('.bggallery_images').click(function () {      
            alert('test');
        });
    </script>
</body>
</html>

Ben deftere html ve js talimat bir test sayfası oluşturduk ve yeniden olamaz hata-uyarı sadece bir kez patlar. Ben bir jquery referans için bu kullanıyorum:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

ve sonunda bu şeyleri başlatmak için

<script>

    $('.bggallery_images').click(function() {
        alert('test');
    });

</script>

Eğer bize söylemediğin veya firebug size yalan bir şey yapıyoruz. o kundakçı sizi gösteren html (o yorumlanır gibi) sayfanın fiziksel kaynağı farklıdır mümkündür. Eğer sorun gösterir sizin çıkış tam bir örnek gönderebilir miyim?

Sen jquery bakmak isteyebilirsiniz. Bağlamak () yöntemi.

Aşağıdaki dokümanlar jquery sayfadan alınır

Example: Cancel a default action and prevent it from bubbling up by returning false:

$("form").bind("submit", function() { return false; })

Example: Stop an event from bubbling without preventing the default action by 
using the .stopPropagation() method.

$("form").bind("submit", function(event) {
  event.stopPropagation();
});

etiketler