jQuery .fn sta dicendo "non è una funzione"

Question

Quando chiamo questa funzione personalizzata

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

Ti piace questa

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

mi dà l'errore quando lo chiamo io

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

Anche quando cambio la funzione a solo

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

fa la stessa cosa. Sembra funzionare correttamente e funziona correttamente in quanto tutte le funzionalità funzionano sulle caselle di input, ma ottengono l'errore. Qualcuno ha qualche idea?

Answer 1

Verificare di non caricare jQuery nella pagina due volte. Alcuni plugin o librerie di plugin includono jQuery. Quindi può sovrascrivere l'istanza jQuery esistente e sovrascrivere le variabili $ e jQuery con una nuova istanza – fresca – che causa l'impossibilità di definire i plug-in esistenti. I plugin vengono aggiunti al prototipo di jQuery quando vengono definiti. Quindi se distruggi l'unica istanza di quell'oggetto, il prototipo viene riportato alla sua forma originale. E quindi questi plugin non fanno più parte di quel prototipo.

Inoltre, potrebbe essere nulla, JSLint sta segnalando che manca un punto e virgola sull'ultima riga della definizione di funzione che hai postato. Dovrebbe essere:

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

E 'sempre una buona idea per eseguire tutti i tuoi javascript attraverso JSLint. Può aiutarti a trovare cose che potresti passare ore a cercare diversamente.

Answer 2

Il plug-in deve essere caricato prima di poter essere utilizzato.

I commenti precedenti confermano che OP stava tentando di utilizzare il plug-in prima che fosse caricato.