我是jQuery新手，因此答案很简单：

我有一张图片，我想用它做几件事。
当用户单击"缩放"图标时，我正在运行" imagetool"插件(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插件无法再正确使用它...是吗？
如果是这样，有什么想法如何处理吗？

解决方案

我们可以尝试将productZoom.click()函数抽象为一个命名函数，然后在更改为备用图像后将其重新绑定。就像是：

// Product Zoom (jQuery)
$(document).ready(function(){
$("#productZoom").click(bindZoom);

// Alternative product photos (jQuery)
$(".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"
                });
        $("#productZoom").click(bindZoom);
        return false;

});  
});

function bindZoom() {
        // 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;
}

同样，将两个ready()块都滚动到同一块中。

首先，我有一个问题，.altPhoto链接还是图像？原因是如果它的图像则此行是错误的

var altImageSrc = $(this).attr("href");

它应该是

var altImageSrc = $(this).attr("src");

这是我一眼就能找到的唯一东西

嘿！我自己整理出来的...

原来，如果我完全删除了包含div的内容，然后用.html重写它，则imagetool插件会再次识别它。

对感兴趣的人的修改代码：

$(document).ready(function(){

  // Product Zoom (jQuery)
  $("#productZoom").click(function() {

    $('#productImage').remove();
    $('#productImageDiv').html('<img src="" id="productImage">');

    // 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)
  $(".altPhoto").click(function() {

    $('#productImageDiv div.viewport').remove();
    $('#productImage').remove();

    // Set new image src
    var altImageSrc = $(this).attr("href");

    // Set new image Zoom link (from the ID... is that messy?)
    var altZoomLink = $(this).attr("id");

    $("#productZoom").attr('href', altZoomLink);

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