javascript - jQuery .fn说 “not a function”

当我调用此自定义函数时

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

即使我将功能更改为

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

它做同样的事情。由于所有功能都可以在输入框中使用，因此它似乎可以正常运行并正常工作，但是会出现错误。谁有想法？

最佳答案

检查您是否没有两次将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的好主意。它可以帮助您找到可能需要花费数小时才能找到的东西。