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

Question

我创建了缩略图 View 。当用户单击时，我希望在对话框中弹出真实图像。这第一次有效，但是一旦 jQuery“单击”在缩略图上触发，它就不会再次触发，除非我重新加载整个页面。我尝试重新绑定(bind)关闭对话框上的单击事件，但这没有帮助。这是我的代码:

$(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() 仅在第一次单击图像时执行，我不知道如何重新绑定(bind)。

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

<code> <p>Second, <code>$(function(){ ...</code> works the same as <code>$(document).ready(){ function(){...,</code> keep that in mind.</p> <p><code>$(document).ready()</code> only fires one time - right after the page loads. So if you are calling <code>LoadProgramsAccordion</code> multiple times, the inner stuff is only being executed one time.</p> <p>Next, beware of <code>$(this)</code>, it can change unexpectedly. So this code</p> </code><pre><code> function() { var src= $(this).attr('src'); var popurl = src.replace("thumbs/", ""); PopUpImage(popurl,$(this)); }); </code></pre> <p>should be changed to look like this:</p>

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

接下来，我需要查看PopUpImage。您需要做很多工作才能找出问题所在。