Not sure how to phrase this properly, so please bear with me. I have a piece of jQuery that looks like the following:
jQuery(document).ready(function() {
$('#main-image').live('mouseover', function() {
$(this).wrap(function() {
return '<a href=' + $(this).attr('src')开发者_Python百科.replace(/\bproduct\b/, 'original') + ' class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, position: \'inside\'">';
});
});
$('#main-image').live('mouseout', function() {
var link_element = $(this).closest('a');
link_element.parent().append($(this));
link_element.remove();
});
});
My HTML markup is straight forward as well:
<img alt="foo" id="main-image" src="/assets/products/1051/product/Perspective_View-0.jpeg?1290039436">
The problem I have is I'm trying to use the cloud zoom jQuery plugin: http://www.professorcloud.com/mainsite/cloud-zoom.htm and it doesn't like the nature of the way I'm binding events here. If I predefine the anchor tag as the wrap() invocation does statically in my HTML, the plugin works perfectly. If I add the anchor tag dynamically to the DOM, cloud zoom does not work. The reason I cannot do it statically is I have a row of photos, and once you click on one of those photos, it goes to the main-image element where it is enlarged. At that point, I want cloud zoom to bind itself to the image. The JavaScript above works great at adding itself and removing itself dynamically around the img tag, however it doesn't bode well with cloud zoom as the event handler that's in cloud zoom is probably attaching itself to the anchor tags on DOM load, not any point after.
Is there anyway to go around fixing this, or will it require hacking the cloud zoom source to also include some kind of jQuery.live() functionality?
Looking at the cloud zoom
source, they do indeed use .bind()
, which of course only binds handlers to existing elements. Just search and replace .bind
with .live
in the main cloud-zoom src, and everything should work.
精彩评论