javascript jQuery 脚本的 Drupal 7 TypeError：$ 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23720918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drupal 7 TypeError for jQuery script: $ is not a function
提问by progryse
I have some JS code but Drupal 7 does not recognize it. I'm getting the following error:
我有一些 JS 代码，但 Drupal 7 无法识别它。我收到以下错误：
TypeError: $ is not a function
Can anyone help me to make this script work? I'm using jQuery v1.4.4.
谁能帮我制作这个脚本？我正在使用 jQuery v1.4.4。
<script type="text/javascript">
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
// this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
screenshotPreview('some text');
});
</script>
回答by ilokhov
Try changing all your instances of the "$" shortcut to "jQuery" and it should work. Calling the screenshotPreview function would for example then look like this:
尝试将“$”快捷方式的所有实例更改为“jQuery”，它应该可以工作。例如，调用 screenshotPreview 函数将如下所示：
// starting the script on page load
jQuery(document).ready(function(){
screenshotPreview('some text');
});
Alternatively enclose all your jQuery code in a function with jQuery as a parameter and the $ shortcut should then work.
或者，将所有 jQuery 代码包含在一个函数中，将 jQuery 作为参数，然后 $ 快捷方式应该可以工作。
// We define a function that takes one parameter named $.
(function ($) {
// Use jQuery with the shortcut:
console.log($.browser);
// Here we immediately call the function with jQuery as the parameter.
}(jQuery));
(Source: https://drupal.org/node/171213)
回答by Pierre Buyle
Drupal 7 provides jQuery in the no-conflict mode, which means that $is not the jQueryobject/namespace. This should not be an issue with properly written jQuery plugins that follow jQuery's plugins authoring documentation.
Drupal 7 在无冲突模式下提供 jQuery ，这意味着它$不是jQuery对象/命名空间。对于遵循jQuery 插件创作文档的正确编写的 jQuery 插件，这应该不是问题。
JavaScript code that expect $to be the jQuery namespace will not work within a Drupal page. This can be easily solved by wrapping the code in an immediately invoked anonymous function that will alias the jQuery namespace to $:
期望$成为 jQuery 命名空间的JavaScript 代码将无法在 Drupal 页面中工作。这可以通过将代码包装在一个立即调用的匿名函数中来轻松解决，该函数将 jQuery 命名空间别名为$：
(function($) {
// Here $ is the jQuery namespace.
})(jQuery);
回答by stevegmag
Try this: (or let me know if that's not right - but it seems to work for me)
试试这个：（如果这不对，请告诉我 - 但它似乎对我有用）
/*******************************************************************
* :: Define Your Functions ::
*******************************************************************/
(function ($) {
removeAjaxLoader = function() {
console.log('removeAjaxLoader');
$('body').find('.ajax-loader').remove();
$('body').find('.ajax-loader-icon').remove();
return false;
} //removeAjaxLoader
addAjaxLoader = function() {
console.log('addAjaxLoader');
removeAjaxLoader();
$('body').append('<div class="ajax-loader"></div><div class="ajax-loader-icon"></div>');
return false;
} //addAjaxLoader
}) (jQuery);
/*******************************************************************
* :: Ready Set Go ::
*******************************************************************/
(function ($) {
$(document).ready(function() {
console.log('ready complete');
removeAjaxLoader();
}); // document.ready
}) (jQuery);
