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

我为我们产品的照片库使用jQZoom（插件，版本2.3）。在产品页面上，用户可以选择根据所选属性重新加载图像的产品中的不同属性。用户可以在初始页面加载时轻松点击缩略图，但是当他们选择一个属性时，通过AJAX刷新的照片和缩略图不再是可点击的。下面是一些代码我的工作：通过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>

任何想法为什么会发生这种情况或如何解决？

来源

2012-03-15 Whatevo

您可以使用事件委托绑定的事件处理程序：

$(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

来源

2012-03-15 17:06:16 Jasper

通过阅读标题，好像你正在运行到动态内容插入的问题，事情是事件处理不重视自己的动态添加元素的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 
});

来源

2012-03-15 17:07:24 Rafay

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

来源

2012-03-18 19:02:30 Whatevo

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

回答

相关问题