Javascript 提升缩放插件不使用ajax

我在网上购物网站上使用提升缩放插件。它正在工作。但当我的产品使用ajax进行更改时，它不会设置数据缩放图像属性。有解决这个问题的办法吗

<script>

功能显示产品（obj1、objproid） { //警报（objproid）

var-url，obj；
url=“showproduct.php？progid3=“+obj1；
尝试
{
obj=新的XMLHttpRequest（）；
}
捕获（e）
{ 
尝试
{
obj=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
捕获（e）
{
警报（“您的浏览器不支持AJAX”）；
}
}
obj.open（“post”，url，true）；
对象发送（空）；
obj.onreadystatechange=函数（）
{
如果（对象readyState==4）
{
$（'a'）.removeClass（“boxcolor5”）
$（'#'+objproid）.addClass（“boxcolor5”）；
var res=对象响应文本；
var txtar=res.split（“：|；：”）；
document.getElementById（'res1'）。innerHTML=txtar[0]；
document.getElementById（'res2'）.innerHTML=txtar[1]；
document.getElementById（'res3'）.innerHTML=txtar[2]；
document.getElementById（'products'）。value=txtar[2]；
document.getElementById（'res4'）.innerHTML=txtar[3]；
document.getElementById（'res5'）.innerHTML='Rs.+txtar[4]；
$（“#zoom_03”）.data（“zoom image”，'/master/imagecontent/images/'+txtar[5]）。elevateToom（）；
document.getElementById（'zoom_03'）。src='/master/imagecontent/images/bigimg/'+txtar[5]；
document.getElementById（'res10'）.setAttribute（'data-image'，'/master/imagecontent/images/bigimg/'+txtar[5]）；
document.getElementById（'res10'）.setAttribute（'data-zoom-image'，'/master/imagecontent/images/'+txtar[5]）；
document.getElementById（'imh0'）.src='/master/imagecontent/images/thumbs/'+txtar[5]；
document.getElementById（'res11'）.setAttribute（'data-image'，'/master/imagecontent/images/bigimg/'+txtar[6]）；
document.getElementById（'res11'）.setAttribute（'data-zoom-image'，'/master/imagecontent/images/'+txtar[6]）；
document.getElementById（'imh1'）.src='/master/imagecontent/images/thumbs/'+txtar[6]；
document.getElementById（'res12'）.setAttribute（'data-image'，'/master/imagecontent/images/bigimg/'+txtar[7]）；
document.getElementById（'res12'）.setAttribute（'data-zoom-image'，'/master/imagecontent/images/'+txtar[7]）；
document.getElementById（'imh2'）.src='/master/imagecontent/images/thumbs/'+txtar[7]；
document.getElementById（'res13'）.setAttribute（'data-image'，'/master/imagecontent/images/bigimg/'+txtar[8]）；
document.getElementById（'res13'）.setAttribute（'data-zoom-image'，'/master/imagecontent/images/'+txtar[8]）；
document.getElementById（'imh3'）.src='/master/imagecontent/images/thumbs/'+txtar[8]；
document.getElementById（'res14'）.setAttribute（'data-image'，'/master/imagecontent/images/bigimg/'+txtar[9]）；
document.getElementById（'res14'）.setAttribute（'data-zoom-image'，'/master/imagecontent/images/'+txtar[9]）；
document.getElementById（'imh4'）.src='/master/imagecontent/images/thumbs/'+txtar[9]；
document.getElementById（'res15'）.setAttribute（'data-image'，'/master/imagecontent/images/bigimg/'+txtar[10]）；
document.getElementById（'res15'）.setAttribute（'data-zoom-image'，'/master/imagecontent/images/'+txtar[10]）；
document.getElementById（'imh5'）.src='/master/imagecontent/images/thumbs/'+txtar[10]；
}           
}
返回false；

}

拇指和提升图像的代码：-

  <div class="product_img_display">
  <div class="product_img">
  <img id="zoom_03" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg"/> 
   </div>
 <div class="product_small_img">
  <div class="multizoom1 thumbs">
   <div class="main" style="height:120px;"> 
   <ul id="carousel2" class="elastislide-list">
  <?php
$i=0;
   $mulim="select * from imageupload where product_code='$codepr'";
  $mulim1=mysql_query($mulim) or die(mysql_error());
 while($mulim2=mysql_fetch_array($mulim1))
 {
 ?> 
   <li class="ml"><a id="res1<?php echo $i; ?>" href="#" data-image="<?php echo $path; ?     >/master/imagecontent/images/bigimg/<?php echo $mulim2['image']; ?>" data-zoom-image="<?php echo $path; ?>/master/imagecontent/images/<?php echo $mulim2['image']; ?>"> 
   <img id="imh<?php echo $i; ?>" src="<?php echo $path; ?>/master/imagecontent/images/thumbs/<?php echo   $mulim2['image']; ?>"  height="65" width="65"  /> 
  </a></li>
  <?php
  $i++;
  }
?>
 </ul>
</div>
 <script>
      $("#zoom_03").elevateZoom({zoomWindowWidth:470, zoomWindowHeight:415,gallery:'carousel2', cursor: 'pointer',     galleryActiveClass: 'active', imageCrossfade: true,scrollZoom : true, loadingIcon: '<?php echo $path; ?>/images/spinner.gif'});
 //pass the images to Fancybox 
 $("#zoom_03").bind("click", function(e) {
 var ez = $('#zoom_03').data('elevateZoom');

  $.fancybox(ez.getGalleryList());
   return false; });
   </script>

删除当前缩放

$('.zoomContainer').remove();
$('#elevate-zoomr').removeData('elevateZoom');

然后再打电话

jQuery("#elevate-zoom").elevateZoom({
  zoomType: "inner",
  cursor: "crosshair"
});

和css

.zoomContainer{ z-index: 9999;}
.zoomWindow{ z-index: 9999;}

您应该添加您的CodeLevateToom，因为它没有设置该数据属性—您设置了。您需要在使用AJAX添加到页面的任何新元素上初始化ElevateToom的新实例-现有实例不会神奇地绑定到新元素我已经这样做了。我必须初始化新实例。但它仍然在悬停时显示先前的图像。不是当前的图像。。。。
.zoomContainer{ z-index: 9999;}
.zoomWindow{ z-index: 9999;}