Question

我使用3rd party script为页面上的图像添加缩放功能。这适用于静态，但不适用于动态内容。

静态版，有效：

$(document).ready(function(){ 
    $('#gallery_main_img').addpowerzoom();
})

动态版，不起作用：

$(document).ready(function(){ 
    $('#gallery_main_img').load(OnGalleryImageChanged);
})

function OnGalleryImageChanged() {
    $('#gallery_main_img').addpowerzoom();
}

addpowerzoom 函数是使用PowerZoom脚本中的此代码创建的，该脚本在我的页面的<head>中引用：

$.fn.addpowerzoom=function(options){ 
    // function content here
}

进入事件处理程序时，Firebug给出了以下错误消息：
$("#gallery_main_img").addpowerzoom is not a function.

所以这似乎是一个范围问题。我的问题是：

如何从我的事件处理程序中访问addpowerzoom（）函数？

Answer 1

如果你检查3rd party script's source，你会注意到的第一件事就是在noConflict mode中设置jQuery，代码为jQuery.noConflict()，并且不会将其分配给变量或者，意思是$不再为jQuery保留。

正如您所提到的，第一种情况正在发挥作用，我假设您在包含第三方脚本之前已经准备好了声明，因为否则这也不会有效。

您可以将代码更改为此代码（将$替换为jQuery）：

jQuery(document).ready(function(){ 
    jQuery('#gallery_main_img').load(OnGalleryImageChanged);
})

function OnGalleryImageChanged() {
    jQuery('#gallery_main_img').addpowerzoom();
}

示例：http://jsfiddle.net/niklasvh/8Vjnu/

或将代码包装在：

中

(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);

或者可能完全删除第三方脚本中的noConflict（作者应该从未放在那里的东西，除非他们假设使用该脚本的每个人都想删除{{1}来自jQuery）。

Javascript范围问题：$（doc）.ready（）中可用的函数，但不在事件处理程序中

1 个答案: