javascript - jQuery elevate zoom: initiate on click function -

i'm using elevate zoom plugin (http://www.elevateweb.co.uk/image-zoom) allow zooming images on hover. problem i'm having though images don't exist on document load, they're being appended on click function, , relevant elevatezoom function isn't working.
jsfiddle demo: 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" }); 

as can see once test image added #area container, want elevatezoom function come play , allow people zoom image, not sure if possible? suggestions appreciated!

sorry, fiddle blocked @ office :(

maybe this:

$(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"                 });                      });         });     }); });