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' }); 

data/htmlをアンバインドして削除するのではなく、.jqzoomの要素を置き換えてください。

http://api.jquery.com/replaceWith

Answer 2

ちょうどタイトルを読み取ることで、動的なコンテンツ挿入問題に実行されているように、それはそう、事はDOMに動的に追加された要素に自分自身を添付のいずれかに再接続していないイベントハンドラです

success:function(data){ 

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

またはdelegate方法

を使用して、イベントの委任を使用してのような ajax成功ハンドラでイベントハンドラ

あなたはjQueryのバージョン1.7以降onメソッドを使用し

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

Answer 3

を使用している場合は、あなたの助けみんなありがとうございました。あなたのソリューションはうまくいきましたが、さらに調べてみると、本当の問題はjQueryのタグの代わりにタグに読み込まれる "rel"属性でした。再度、あなたの助けを感謝します。