javascript - jQuery .fn 表示 "not a function"

Question

当我调用这个自定义函数时

$.fn.inputBoxHelper = function () {
    var args = arguments[0] || {};
    var matchingElem = $.grep(this, function (e) { return $(e).val() == $(e).attr('title'); });
    $(matchingElem).addClass(args.className);

    this.bind({
        focus: function(){
            if ($(this).val().trim() == $(this).attr('title')) { $(this).val(emptyString).removeClass('gray'); }
        },
        blur: function(){
            if ($(this).val().trim() == emptyString) { $(this).val($(this).attr('title')).addClass('gray'); }
        }
    });
    return this;
}

像这样

$('input:text').inputBoxHelper({ className: 'gray' });

调用时报错

$("input:text,input:checkbox").inputBoxHelper is not a function
file:///D:/repository/scripts/script_tests/test.js
Line 20

即使我将函数更改为 just

$.fn.inputBoxHelper = function () {return this;}

它做同样的事情。它似乎运行良好并且工作正常，因为所有功能都在输入框上运行但出现错误。有人有什么想法吗？

Answer 1

检查您没有将 jQuery 加载到页面中两次。一些插件或插件库喜欢包含 jQuery。因此它可以覆盖您现有的 jQuery 实例并使用新的实例覆盖 $ 和 jQuery 变量，从而导致现有插件未定义。插件在定义时被添加到 jQuery 的原型(prototype)中。因此，如果您销毁该对象的唯一实例，则原型(prototype)将重置为其原始形式。因此，这些插件不再是该原型(prototype)的一部分。

另外，也可能没什么，JSLint正在报告您在发布的函数定义的最后一行缺少分号。应该是:

$.fn.inputBoxHelper = function () {
  var args = arguments[0] || {};
  var matchingElem = $.grep(this, function (e) { return $(e).val() == $(e).attr('title'); });
  $(matchingElem).addClass(args.className);

  this.bind({
     focus: function(){
          if ($(this).val().trim() == $(this).attr('title')) { $(this).val(emptyString).removeClass('gray'); }
      },
      blur: function(){
          if ($(this).val().trim() == emptyString) { $(this).val($(this).attr('title')).addClass('gray'); }
      }
  });
  return this;
};

总是通过 JSlint 运行所有 javascript 是个好主意。它可以帮助您找到您可能要花费数小时才能找到的东西。