jQueryの（）を削除した後に動作していないクリック機能は、HTMLの

Question

サンプルを使用している：

$(document).ready(function() { 
    $('.Thumbnails').each(function() { 
     $(this).click(function() { 
        var BigImageLink = $(this).attr("bigimagelink"); 
        $('#ImgBigLink').attr('href', BigImageLink); 
        $('#productImgDefault').attr('src', BigImageLink); 
     }); 

    });  
}); 

この機能が働いている素晴らしい：

<div class="row" id="ThumbnailHolder"> 
    <div class="col-md-12"> 
     <img src="http://images.sportsdirect.com/images/products/16503236_pit.jpg" class="Thumbnails" bigimagelink="http://images.sportsdirect.com/images/products/16503236_l.jpg"> 
     <img src="http://images.sportsdirect.com/images/products/16503236_piat_a1.jpg" class="Thumbnails" bigimagelink="http://images.sportsdirect.com/images/products/16503236_l_a1.jpg"> 
    </div> 
</div> 

はここに私のコードです。クラスThumbnailsの要素をクリックすると、すべてが必要となります。問題は、私は次のコードの一部を実行したときに来る：

$.ajax({ 
    url: 'CheckColorPrice.php', 
    type: 'POST', 
    data: { 
     url: '<?php echo $url;?>', 
     ColorId: ColorNumber, 
     ProductUrl: '<?PHP echo $ProductUrlWithoutCode;?>' 
    }, 
    dataType: 'json', 
    success: function (data) { 
      $(".Thumbnails").remove(); 
      $.each(data.thumbnails, function(index, thumbnails) {        
      $('#ThumbnailHolder div').append('<img src="http://images.sportsdirect.com/images/products/' + thumbnails + '" class="Thumbnails" bigimagelink="http://images.sportsdirect.com/images/products/' + thumbnails + '">'); 
      }); 
    } 
}); 

私は問題が$(".Thumbnails").remove();から来てかなり確信しているが、私はそれがクラスThumbnailsですべての画像を削除している新しいものに置き換える必要があります同じ構造とクラスが付加されています。このコードを実行すると、CLICKの機能がThumbnailsに応答していません。これまでどんな出力エラーもありません。なぜ私のclick機能がもう機能していないのですか？

私はあなたがこれで私を助けることができると確信しています。

ありがとうございます！

Answer 1

現在、使用しているのは、コードがイベントバインディングコールを行うときにページに存在する要素にのみアタッチする「ダイレクト」バインディングです。

要素を動的に生成する場合は、.on()委任イベントアプローチを使用してEvent Delegationを使用する必要があります。。

一般的な構文

$(staticParentElement).on('event','selector',callback_function) 

例は

$('#ThumbnailHolder div').on('click', '.Thumbnails', function(){  
    var BigImageLink = $(this).attr("bigimagelink"); 
    $('#ImgBigLink').attr('href', BigImageLink); 
    $('#productImgDefault').attr('src', BigImageLink); 
});