Question

我创建了一个缩略图视图。当用户点击时，我希望在对话框中弹出真实图像。这是第一次工作，但是一旦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（）仅在第一次点击图像时执行，我无法弄清楚如何重新绑定。

Answer 1

好的，先关闭，重构LoadProgramsAccordion。


  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();
    }



Second, $(function(){ ... works the same as $(document).ready(){ function(){...,   keep that in mind.

$(document).ready() only fires one time - right after the page loads.  So if you are calling LoadProgramsAccordion multiple times, the inner stuff is only being executed one time.

Next, beware of $(this), it can change unexpectedly. So this code

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


should be changed to look like this:

接下来，我需要看到 PopUpImage 。你只是想了解问题所在。

Answer 2

克里斯，谢谢你对$（这个）的提示，我因为它改变了编程。对于其他人，我根据你的建议改用Lightbox。

图像上的jQuery点击事件仅触发一次

2 个答案: