jQuery的 - 不是一个函数错误

Question

这里是我的代码：

(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(); 
}); 

它给了我一个错误。怎么了？

Answer 1

这个问题是 “最好的” 通过使用anonymous function解决了通jQuery对象中正是如此：

匿名函数如下：

<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> 

这是JavaScript与'模式模式'一起使用时实现（穷人）'依赖注入'的方法。

所以你的代码是这样：
当然，你可能要做出一些改变你的内部代码了，但你的想法。

<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> 

Answer 2

当不同的系统抓取$变量时出现问题。您有多个$变量被用作来自多个库的对象，导致错误。

为了解决这个问题，只是你(function($){之前使用jQuery.noConflict：

jQuery.noConflict(); 
(function($){ 
$.fn.pluginbutton = function (options) { 
... 

Answer 3

变化

}); 


$(document).ready(function() { 
    $('.smallTabsHeader a').pluginbutton(); 
}); 

到

})(jQuery); //<-- ADD THIS 


$(document).ready(function() { 
    $('.smallTabsHeader a').pluginbutton(); 
}); 

这是必需的，因为你需要调用的匿名函数你用

创建

(function($){ 

并注意到它期望它将在内部使用的参数为$，所以您需要将引用传递给jQuery对象。

此外，您将需要改变所有的this.到$(this).，除了第一个，在你做return this.each

在第一个（，你不需要$()），这是因为在插件主体this持有对与您的选择器匹配的jQuery对象的引用，但在任何深处，this都引用特定的DOM元素，因此您需要将其包装在$()中。

的完整代码在http://jsfiddle.net/gaby/NXESk/

Answer 4

我通过重命名我的函数来解决它。

更改

function editForm(value) 

到

function editTheForm(value) 

完美。

Answer 5

当一个ASP.Net Web窗体原型转换为MVC的网站我得到了这些错误：

TypeError: $(...).accordion is not a function
$("#accordion").accordion(

---

$('#dialog').dialog({
TypeError: $(...).dialog is not a function

它在web表单工作正常。问题/解决方案是_Layout.cshtml中的此行

@Scripts.Render("~/bundles/jquery") 

注释掉它，看看错误是否消失。然后修复它在BundlesConfig：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js")); 

Answer 6

在我的情况，同样的错误有一个更容易修复。基本上我的功能是在一个.js文件中，它没有包含在当前显示的aspx中。我所需要的只是包装线。