Миниатюры не могут быть загружены после перезагрузки через AJAX

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, а не на снятие и удаление данных/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. Опять же, оцените вашу помощь.