jQuery: How does one use .live() on an existing event handler (Cloud Zoom Plugin)?
<p>Not sure how to phrase this properly, so please bear with me. I have a piece of jQuery that looks like the following:</p>

<pre><code>jQuery(document).ready(function() {
  $('#main-image').live('mouseover', function() {
    $(this).wrap(function() {
      return '&lt;a href=' + $(this).attr('src').replace(/\bproduct\b/, 'original') + ' class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, position: \'inside\'"&gt;';
    });

  });
  $('#main-image').live('mouseout', function() {
    var link_element = $(this).closest('a');
    link_element.parent().append($(this));
    link_element.remove();
  });
});
</code></pre>

<p>My HTML markup is straight forward as well:</p>

<pre><code>&lt;img alt="foo" id="main-image" src="/assets/products/1051/product/Perspective_View-0.jpeg?1290039436"&gt;
</code></pre>

<p>The problem I have is I'm trying to use the cloud zoom jQuery plugin: <a href="http://www.professorcloud.com/mainsite/cloud-zoom.htm" rel="nofollow">http://www.professorcloud.com/mainsite/cloud-zoom.htm</a> 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. </p>

<p>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?</p>
