Событие jQuery click на изображении срабатывает только один раз - PullRequest
Новая
       13

Событие jQuery click на изображении срабатывает только один раз

4 голосов
/ 21 апреля 2010

Я создал вид миниатюр. Когда пользователь нажимает, я хочу, чтобы реальное изображение всплыло в диалоге. Это работает в первый раз, но как только jQuery 'click' срабатывает на миниатюре, он никогда не запускается снова, пока я не перезагрузлю всю страницу. Я попытался повторно связать события щелчка на закрытии диалогового окна, что это не помогает. Вот мой код: 

$(document).ready(function() 
    {
        $("#tabs").tabs();
        $(".selector").tabs( {selected: 0} );
        $("img.gallery").live('click',
                function()
                {
                    var src= $(this).attr('src');
                    var popurl = src.replace("thumbs/", "");
                    PopUpImage(popurl,$(this));
                });
        // Preload animation for browser cache
        var ajaximg = new Image();
        ajaximg.src = 'images/ajax-loader.gif';
    });

    function LoadProgramsAccordion()
    {
        $(function() {
            $("#programsaccordion").accordion({
                            autoHeight: false,
                navigation: true,
                            collapsible: true
            });
        });

        $(function() {
            $("#programsaccordioninner").accordion({
                            autoHeight: false,
                navigation: true,
                            collapsible: true
            });
        });

        $(function() {
            $("#policiesaccordioninner").accordion({
                            autoHeight: false,
                navigation: true,
                            collapsible: true
            });
        });

        $(function() {
            $("#registrationaccordioninner").accordion({
                            autoHeight: false,
                navigation: true,
                            collapsible: true
            });
        });

        $('.accordion .head').click(function() {
                        $(this).next().toggle();
                        return false;
                }).next().hide();
    }

    function LoadGalleryView()
    {
        $('img.gallery').each(function(){
            $(this).hover(function(){
                $(this).attr('style', 'height: 100%; width: 100%;');
            }, function(){
                $(this).removeAttr('style');
            });
        });
    }

    function CheckImage(img,html,source)
    {
        if ( img.complete )
        {
            $('#galleryProgress').html('');
            var imgwidth = img.width+35;
            var imgheight = img.height+65;
            $('<div id="viewImage" title="View"></div>').html(html).dialog(
                    {
                        bgiframe: true,
                        autoOpen: true,
                        modal: true,
                        width: imgwidth,
                        height: imgheight,
                        position: 'center',
                        closeOnEscape: true
                    });
        }
        else
        {
            $('#galleryProgress').html('<img src="images/ajax-loader.gif" /><br /><br />');
            setTimeout(function(){CheckImage(img,html);},50);
        }
    }

    function PopUpImage(url,source)
    {
        var html = '<img src="'+url+'" />';
        var img = new Image();
        img.src = url;
        if ( ! img.complete )
        {
            setTimeout(function(){CheckImage(img,html,source);},10);
        }
    }

PopUpImage () выполняется только при первом нажатии на изображение, и я не могу понять, как выполнить повторную привязку.

Ответы [ 2 ]

2 голосов
/ 21 апреля 2010

ОК, сначала выключите, рефакторинг LoadProgramsAccordion. 

<code>
  function LoadProgramsAccordion()
    {
        $(function() {
            $("#programsaccordion, #programsaccordioninner, #policiesaccordioninner, #registrationaccordioninner").accordion({
                            autoHeight: false,
                navigation: true,
                            collapsible: true
            });
        });

         $('.accordion .head').click(function() {
                        $(this).next().toggle();
                        return false;
                }).next().hide();
    }
<code>

Во-вторых, $(function(){ ... работает так же, как $(document).ready(){ function(){...,, имейте это в виду.

$(document).ready() срабатывает только один раз - сразу после загрузки страницы. Так что, если вы звоните LoadProgramsAccordion несколько раз, внутренний материал выполняется только один раз.

Далее, остерегайтесь $(this), он может неожиданно измениться. Итак, этот код 

           function()
            {
                var src= $(this).attr('src');
                var popurl = src.replace("thumbs/", "");
                PopUpImage(popurl,$(this));
            });
</code>

следует изменить так, чтобы он выглядел следующим образом: 

           function()
            {
                var that = $(this);
                var src= that.attr('src');
                var popurl = src.replace("thumbs/", "");
                PopUpImage(popurl,that);
            });
</code>

Далее мне нужно будет увидеть PopUpImage . У вас есть много чего выяснить, где проблема.

1 голос
/ 01 июня 2010

Крис, спасибо за хедз-ап на $ (это), из-за этого я изменил свое программирование. В остальном я переключился на лайтбокс по вашему предложению.

...