jQuery点击事件只在图片上触发一次

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()只有在第一次单击图像时才会执行，我无法弄清如何重新绑定。

- Steve

---

你是否构建了一个专注于此功能/问题的简单HTML页面，以排除其他可能性？如果是这样，我建议您发布它。如果没有，那可能会有所帮助，看起来可能存在您没有向我们展示的页面部分的问题。 - Brian

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>

第二点，$(function(){ ...与$(document).ready(){ function(){...,的作用相同，请记住这一点。 $(document).ready()只会在页面加载后执行一次。因此，如果您多次调用LoadProgramsAccordion，则内部内容只会执行一次。

接下来，要注意$(this)可能会意外更改。因此，应将以下代码更改为：

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

最后，我需要看到PopUpImage。你有很多事情要做，要找出问题所在。

- Chris Brandsma

---

顺便说一句 Steve，如果你遇到太多麻烦，就过来让我看看吧。 - Chris Brandsma

$(document).ready() 只会在页面加载后触发一次。帮了我很多，谢谢。 - Kilizo

Answer 2

Chris，感谢你提供的$(this)信息，我已经根据它更改了我的编程。至于其余部分，我已经按照你的建议切换到Lightbox。

- Steve