jquery - 不是函数错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6109847/
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
jquery - is not a function error
提问by Phil Hymanson
Here is my code:
这是我的代码：
(function($){
$.fn.pluginbutton = function (options) {
myoptions = $.extend({ left: true });
return this.each(function () {
var focus = false;
if (focus === false) {
this.hover(function () {
this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 });
this.removeClass('VBfocus').addClass('VBHover');
}, function () {
this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
this.removeClass('VBfocus').removeClass('VBHover');
});
}
this.mousedown(function () {
focus = true
this.animate({ backgroundPosition: "0 30px" }, { duration: 0 });
this.addClass('VBfocus').removeClass('VBHover');
}, function () {
focus = false;
this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
this.removeClass('VBfocus').addClass('VBHover');
});
});
}
});
$(document).ready(function () {
$('.smallTabsHeader a').pluginbutton();
});
It gives me an error. What's wrong?
它给了我一个错误。怎么了？
回答by Prisoner ZERO
This problem is "best" solved by using an anonymous functionto pass-in the jQuery object thusly:
这个问题是“最好”解决的，方法是使用匿名函数传入 jQuery 对象：
The Anonymous Function Looks Like:
匿名函数看起来像：
<script type="text/javascript">
(function($) {
// You pass-in jQuery and then alias it with the $-sign
// So your internal code doesn't change
})(jQuery);
</script>
This is JavaScript's method of implementing (poor man's) 'Dependency Injection' when used alongside things like the 'Module Pattern'.
当与“模块模式”等事物一起使用时，这是 JavaScript 实现（穷人的）“依赖注入”的方法。
So Your Code Would Look Like:
Of course, you might want to make some changes to your internal code now, but you get the idea.
所以你的代码看起来像：
当然，你现在可能想对你的内部代码做一些改变，但你明白了。
<script type="text/javascript">
(function($) {
$.fn.pluginbutton = function(options) {
myoptions = $.extend({ left: true });
return this.each(function() {
var focus = false;
if (focus === false) {
this.hover(function() {
this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 });
this.removeClass('VBfocus').addClass('VBHover');
}, function() {
this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
this.removeClass('VBfocus').removeClass('VBHover');
});
}
this.mousedown(function() {
focus = true
this.animate({ backgroundPosition: "0 30px" }, { duration: 0 });
this.addClass('VBfocus').removeClass('VBHover');
}, function() {
focus = false;
this.animate({ backgroundPosition: "0 0" }, { duration: 0 });
this.removeClass('VBfocus').addClass('VBHover');
});
});
}
})(jQuery);
</script>
回答by Gabriele Petrioli
change
改变
});
$(document).ready(function () {
$('.smallTabsHeader a').pluginbutton();
});
to
到
})(jQuery); //<-- ADD THIS
$(document).ready(function () {
$('.smallTabsHeader a').pluginbutton();
});
This is needed because, you need to call the anonymous function that you created with
这是必需的，因为您需要调用您创建的匿名函数
(function($){
and notice that it expects an argument that it will use internally as $, so you need to pass a reference to the jQuery object.
并注意它需要一个参数，它将在内部使用 as $，因此您需要传递对 jQuery 对象的引用。
Additionally, you will need to change all the this.to $(this)., except the first one, in which you do return this.each
此外，您需要将所有更改this.为$(this).，除了第一个，您在其中执行return this.each
In the first one (where you do not need the $()) it is because in the plugin body, thisholds a reference to the jQuery object matching your selector, but anywhere deeper than that, thisrefers to the specific DOM element, so you need to wrap it in $().
在第一个（您不需要$()）中，这是因为在插件主体中，this保存了对与您的选择器匹配的 jQuery 对象的引用，但比这更深的任何地方都this引用了特定的 DOM 元素，因此您需要将其包装起来在$()。
Full code at http://jsfiddle.net/gaby/NXESk/
回答by Kamyar
The problem arises when a different system grabs the $ variable. You have multiple $ variables being used as objects from multiple libraries, resulting in the error.
当不同的系统获取 $ 变量时，问题就会出现。您有多个 $ 变量被用作来自多个库的对象，从而导致错误。
To solve it, use jQuery.noConflictjust before your (function($){:
要解决它，请在您的jQuery.noConflict之前使用(function($){：
jQuery.noConflict();
(function($){
$.fn.pluginbutton = function (options) {
...
回答by Luillyfe
It works on my case:
它适用于我的情况：
import * as JQuery from "jquery";
const $ = JQuery.default;
回答by Jeremy Thompson
When converting an ASP.Net webform prototype to a MVC site I got these errors:
将 ASP.Net webform 原型转换为 MVC 站点时，我收到以下错误：
TypeError: $(...).accordion is not a function
$("#accordion").accordion(
TypeError: $(...).accordion 不是函数
$("#accordion").accordion(
$('#dialog').dialog({
TypeError: $(...).dialog is not a function
$('#dialog').dialog({
TypeError: $(...).dialog 不是函数
It worked fine in the webforms. The problem/solution was this line in the _Layout.cshtml
它在网络表单中运行良好。问题/解决方案是 _Layout.cshtml 中的这一行
@Scripts.Render("~/bundles/jquery")
Comment it out to see if the errors go away. Then fix it in the BundlesConfig:
将其注释掉以查看错误是否消失。然后在 BundlesConfig 中修复它：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
回答by rmooney
I solved it by renaming my function.
我通过重命名我的函数来解决它。
Changed
改变了
function editForm(value)
to
到
function editTheForm(value)
Works perfectly.
完美运行。
回答by Ash
In my case, the same error had a much easier fix. Basically my function was in a .js file that was not included in the current aspx that was showing. All I needed was the include line.
在我的情况下，同样的错误有一个更容易修复。基本上，我的函数位于一个 .js 文件中，该文件未包含在当前显示的 aspx 中。我所需要的只是包含行。
