jquery - jquery 关于动态生成的内容

Question

我对 JQuery 动态生成的内容有一点问题。

我有这个页面：

http://velapazza.it/store/index.php/camicia-cotone-manica-lunga/camicia-cotone-modello-101.html

我使用 JQueryZoom（来自 Jack Moore），它运行良好。问题是当我单击缩略图时......使用 JQuery 我将主照片替换为单击的照片（使用html()方法），并且缩放不起作用。

我使用的是 JQuery 1.9.1 版本，如您所知，它不支持live()方法；而不是我使用 on() 方法，但似乎没有任何效果....

任何人都可以帮助我吗？

提前致谢

米:)

Answer 1

如果您按照给定的示例执行缩放。即处于文档就绪状态。将其更改为悬停在图像或 div 上，如下所示

$(".your-div or img").hover(function(){
  $('a.photo').zoom({url: 'photo-big.jpg'});
});

Answer 2

更换后，您是否将缩放绑定到 img 上？我建议您在单击缩略图时从原始元素中删除缩放元素，然后在替换图像后将其绑定：

$('#example').trigger('zoom.destroy'); // remove zoom
$('#example').zoom(); // add zoom

Answer 3

如果动态添加元素，我建议在文档中使用 on() ：

$(document).on("click", ".container .image" . function(){
    ....
});

如果稍后添加了匹配选择器事件的元素，这将激活它们的操作。

要在加载时应用插件，您应该将实例例程添加到您的 ajax 加载中：

$.ajax({ type: "GET",   
     url: "your provider",   
     async: true,
     success : function(text)
     {
         ....
         jQuery(text).appendTo(container); 

         newElement.pluginName();
     }
});