Javascript作用域问题:函数在$(doc).ready()中可用，但在事件处理程序中不可用

Javascript scope issue: function available in $(doc).ready(), but not in event handler

本文关键字：事件处理 程序 作用域 问题 doc 函数 Javascript ready      更新时间：2023-09-26

我使用第三方脚本为页面上的图像添加缩放功能。这对于静态内容非常有效，但对于动态内容则不然。

静态版本，作品: 

$(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()函数从我的事件处理程序?

如果你检查第三方脚本的源代码，你会注意到它做的第一件事是设置jQuery在noConflict模式，代码jQuery.noConflict()，它不分配给一个变量，这意味着$不再为jQuery保留了。

正如您提到的第一个案例正在工作，我假设您在包含第三方脚本之前有ready语句，因为否则也无法工作。

您可以将代码更改为(将$替换为jQuery):

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

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

或将代码包装在a:

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

或者从第三方脚本中完全删除noConflict(这是作者一开始就不应该放在那里的东西，除非他们假设每个使用脚本的人都想从$中删除jQuery)。

相关文章：