Question

我正在为产品的照片库使用jQZoom（插件，版本2.3）。在产品页面上，用户可以选择在产品中选择基于所选属性重新加载图像的不同属性。用户可以在初始页面加载时单击缩略图，但是当他们选择属性时，通过AJAX刷新照片并且缩略图图像不再可点击。这是我正在使用的一些代码：

在页面加载时以及选择新产品属性时调用此部分：

function findProductPhotos(attributeDetailID) {
    if( typeof attributeDetailID != "undefined" && attributeDetailID > 0 ) {
        $.ajax({
            cache: false,
            data: {
                method: 'getAttributeDetailImages',
                productAttributeDetailID: attributeDetailID
            },
            dataType: 'json',
            success: function(data) {
                updateProductPhotos(data);
            },
            traditional: true,
            type: "GET",
            url: "/com/ei/image/ImageProxy.cfc"
        });
    }
}

检索图像后调用此函数：

function updateProductPhotos(data) {
    // if images where returned, then update the main photo and thumbnail
        if(data.length > 0) {
            // remove all existence of jqzoom so we can reassign it correctly w/o error
            $(".jqzoom").unbind().removeData('jqzoom').empty();
            $(".zoomPad").remove();

            // remove all the current thumbnails
            $('#thumblist').empty();

            // put back all the new thumbnails and main product image
            $(data).each(function(i,objImg) {
                // if this is the first image, replace the main image with it
                if (i==0) {
                    var mainProdImgElem = $('<img id="mainProdImg" width="350" />');
                    $(mainProdImgElem).attr('src',objImg.srcHiRes);
                    $(mainProdImgElem).appendTo('.jqzoom');
                    $('.jqzoom').attr('href',objImg.srcHiRes);
                    $('.zoomWrapperImage').find('img').attr('src', objImg.srcHiRes);
                }

                var elemThumb = $('<li><a href="javascript:void(0);"><img width="75" border="0" /></a></li>');
                if (i==0) {
                    $(elemThumb).find('a').addClass('zoomThumbActive');
                }
                $(elemThumb).find('img')
                    .attr('src', objImg.srcThumb)
                    .attr('rel', '{gallery: \'gal1\', smallimage: \'' + objImg.srcHiRes + '\', largeimage: \'' + objImg.srcHiRes + '\'}');
                $(elemThumb).appendTo('#thumblist');
            });

            // rebind jqzoom
            $(".jqzoom").jqzoom(jqZoomOptions);
        }
    }

包含缩略图的HTML代码段：

<ul class="clearfix" id="thumblist">
    <cfloop query="qimages">
        <cfset variables.Thumbnail = imageObj.getImageSrc(
                imageID = imageID,
                size = "thumbnail")>

        <cfif FileExists(ExpandPath(hiresFilename))>
            <cfset zoomerFile = hiresFilename />
        <cfelse>
            <cfset zoomerFile = largeFilename />
        </cfif>

        <li>
            <a href="javascript:void(0);" <cfif currentrow eq 1>class="zoomThumbActive" rel="{gallery: 'gal1', smallimage: '#zoomerFile#', largeimage: '#zoomerFile#'}">
                <img src="#variables.Thumbnail#" width="75" border="0">
            </a>
        </li>
    </cfloop>
</ul>

知道为什么会发生这种情况或如何解决它？

Answer 1

您可以使用事件委派来绑定事件处理程序：

$(document).delegate('.my-images', 'click', eventHandler);

http://api.jquery.com/delegate

- 另一个想法 -

而不是：

$(".jqzoom").unbind().removeData('jqzoom').empty();

怎么样：

$(".jqzoom").replaceWith('<div />', { class : 'jqzoom' });

只需替换.jqzoom元素，而不是取消绑定并删除data / html。

http://api.jquery.com/replaceWith

Answer 2

只是通过阅读标题，似乎你遇到了动态内容插入问题，事情就是事件处理程序不要将自己附加到DOM的动态添加元素重新附加ajax成功处理程序中的事件处理程序，如

success:function(data){

 $("Element").bind("click");
}

或使用delegate方法

使用事件委托

$(document).delegate("ELEMENT","click",function(e){
 //event handler code here
});

如果您使用的是jquery版本1.7+，请使用on方法

$(document).on("click","ELEMENTselector",function(e){
 //event handler code here
});

Answer 3

谢谢大家的帮助。您的解决方案工作正常，但在进一步研究之后，真正的问题是加载到标记中的“rel”属性而不是jQuery中的标记。再次感谢您的帮助。

通过AJAX重新加载后缩略图无法点击

3 个答案: