javascript - jQuery 提升缩放 : initiate on click function

Question

我目前正在使用提升缩放插件 ( http://www.elevateweb.co.uk/image-zoom ) 来允许在悬停时放大图像。我遇到的问题是文档加载时不存在图像，它们被附加到点击函数上，因此相关的 elevateZoom 函数不起作用。
jSFiddle 演示:http://jsfiddle.net/neal_fletcher/3j33gb1y/
HTML:

<button data-rel="http://2.bp.blogspot.com/-MUcNEVzLIB8/TrStjvP92kI/AAAAAAAABLI/eK3vb1QMrrw/s1600/slide1-new.png">Click!</button>
<button data-rel="http://1.bp.blogspot.com/-KDiH65CZ8Hs/TjO9rQbmt9I/AAAAAAAAAfg/HeVV38ckUzk/s1600/3.jpg">Click!</button>
<button data-rel="http://4.bp.blogspot.com/-pZuNX8uqQhw/TjO9rDvyC8I/AAAAAAAAAfY/N91storzGWc/s1600/2.jpg">Click!</button>
<button data-rel="http://4.bp.blogspot.com/-y1cPqvkIts8/TjPDKH1-XDI/AAAAAAAAAgA/l8JbwyqcQvI/s1600/hompimenu.jpg">Click!</button>
<div id="area"></div>

jQuery:

$(document).ready(function () {
    $("button").click(function () {
        var imgUrl = $(this).data('rel');
        $("#area").html("<img class='test' src='" + imgUrl + "' data-zoom-image='" + imgUrl + "' />").hide().imagesLoaded(function () {
            $(this).fadeIn(500);
        });
    });
});

$(".test").elevateZoom({
    zoomType: "inner",
    cursor: "crosshair"
});

正如您所看到的，将 test 图像添加到 #area 容器后，我希望 elevateZoom 函数发挥作用，并且允许人们放大图像，不确定这是否可能？任何建议将不胜感激!

Answer 1

抱歉， fiddle 在我的办公室被屏蔽了:(

也许是这样的:

$(document).ready(function () {
    $("button").click(function () {
        var imgUrl = $(this).data('rel');
        $("#area").html("<img class='test' src='" + imgUrl + "' data-zoom-image='" + imgUrl + "' />").hide().imagesLoaded(function () {
            $(this).fadeIn(500, function() {
                $(".test").elevateZoom({
                    zoomType: "inner",
                    cursor: "crosshair"
                });         
            });
        });
    });
});