Question

我正在制作一个大型数据集，其中包含的图像将是表格中的第一列。一次加载所有全尺寸图像是行不通的，所以我设置了分页表，只有当行可见时插入图像：

  tableContent += '<tr>';
  tableContent += '<td><span id="photofield_' + filename + '"></span></td>';

然后准备好显示时：

function placePhoto(filename) {
  document.getElementById('photofield_'+filename).innerHTML = '<img id="tzoom' + filename + '" src="images/' + filename  + '" data-zoom-image="images/big_' + filename + '" width="100" class="initzoom">';
}

这适用于根据需要加载和显示图像。

在开始分页之前，我使用的是jquery插件elevateZoom，就像

一样简单

$("#img_01").elevateZoom();

并且对于$（document）.ready调用之后添加的图像工作正常。但是，当我添加以下内容时，它对于placePhoto添加的元素不起作用：

$('body').on('click','img.initzoom',initzoom)


function initzoom(event) {
  event.preventDefault();
  alert("#"+this.id);
  $("#"+this.id).elevateZoom();
}

一切看起来都很好，警报弹出的ID与添加的img相匹配，但没有明显效果。

我做错了什么吗？或者如果没有，我可以在哪里进行故障排除？

新添加的图像上的jquery / elevatezoom

0 个答案: