jQuery:如何在现有的事件处理程序(云缩放插件)上使用.live()？

Question

我不知道该如何恰当地表达，所以请耐心等待。我有一段jQuery，如下所示：

jQuery(document).ready(function() {
  $('#main-image').live('mouseover', function() {
    $(this).wrap(function() {
      return '<a href=' + $(this).attr('src').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();
  });
});

我的HTML标记也很简单：

<img alt="foo" id="main-image" src="/assets/products/1051/product/Perspective_View-0.jpeg?1290039436">

我遇到的问题是，我正在尝试使用云缩放jQuery插件：http://www.professorcloud.com/mainsite/cloud-zoom.htm，它不喜欢我在这里绑定事件的方式。如果我像在HTML中静态地调用wrap()那样预定义锚标记，那么插件就能完美地工作。如果我将锚标记动态添加到DOM中，云缩放将不起作用。我不能静态操作的原因是我有一排照片，一旦你点击其中一张照片，它就会转到主图像元素，在那里它被放大了。在这一点上，我希望cloud zoom将自己绑定到图像上。上面的JavaScript很适合在img标签周围动态添加和删除自己，但是它对云缩放来说并不是一个好兆头，因为云缩放中的事件处理程序可能会在DOM加载时将自己附加到锚定标签，而不是之后的任何点。

有没有办法解决这个问题，或者需要修改云变焦源以包含某种jQuery.live()功能？

Answer 1

查看cloud zoom源代码，它们确实使用了.bind()，它当然只将处理程序绑定到现有元素。只需在主cloud-zoom src中搜索并用.live替换.bind，一切都会正常工作。