How to Make Featured Image Zoomer work for Ajax Loaded Images

[ssh]

1) Script Title: Featured Image Zoomer (now w/Multi-Zoom) v2.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

3) Describe problem:

Hello, I am trying to make this script (snippet below) work on AJAX loaded content and it does not work. I understand it doesn't because I am binding the event on document ready. Yet the newly updated images (via AJAX) are not on the page when it's loaded. I am trying to use a delegate in order for this to work. Like on. but I could not get it go. Could someone show me how you can apply "delegate" or use "on" so to work on future content? Thanks a bunch!


jQuery(document).ready(function($){
$(' #multizoom1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
// additional options
})
})

I was trying to tie it to the button that triggers AJAX load onclick. did not work. #btn-1 sits on original portion of page

jQuery("#btn_1").on("click", function () {
$('#multizoom1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
// additional options
})
})
I also tried below. none works

jQuery(document).on("click", "#btn_1", function () {
$('#multizoom1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
// additional options
})
})

[ssh]

Issue resolved by using delegate rather than on click