通過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重新加載後無法點擊的縮略圖

回答

相關問題