我是 jQuery 新手,所以这个问题的答案可能很简单:
我有一个图像,我想用它做几件事。当用户单击“缩放”图标时,我正在运行“图像工具”插件 ( http://code.google.com/p/jquery-imagetool/ ) 以加载更大版本的图像。该插件在图像周围创建一个新的 div 并允许用户平移。
当用户单击替代图像时,我将删除旧图像并加载新图像。
当用户单击替代图像,然后单击缩放按钮时,问题就出现了 - imagetool 插件创建了新的 div,但图像出现在它之后......
代码如下:
// Product Zoom (jQuery)
$(document).ready(function(){
$("#productZoom").click(function() {
// Set new image src
var imageSrc = $("#productZoom").attr("href");
$("#productImage").attr('src', imageSrc);
// Run the imagetool plugin on the image
$(function() {
$("#productImage").imagetool({
viewportWidth: 300,
viewportHeight: 300,
topX: 150,
topY: 150,
bottomX: 450,
bottomY: 450
});
});
return false;
});
});
// Alternative product photos (jQuery)
$(document).ready(function(){
$(".altPhoto").click(function() {
$('#productImageDiv div.viewport').remove();
$('#productImage').remove();
// Set new image src
var altImageSrc = $(this).attr("href");
$("#productZoom").attr('href', altImageSrc);
var img = new Image();
$(img).load(function () {
$(this).hide();
$('#productImageDiv').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr({
src: altImageSrc,
id: "productImage"
});
return false;
});
});
在我看来,imagetool 插件一旦被替换为新图像就无法再看到#productImage 图像......所以我认为这与绑定有关?如因为页面加载后新图像添加到dom中,iamgetool插件无法再正确使用它......是这样吗?如果是这样,任何想法如何处理它?