Come si aggiunge una funzione a un elemento tramite jQuery?

Question

voglio fare qualcosa di simile:

$('.dynamicHtmlForm').validate = function() { 
    return true; 
} 

$('.dynamicHtmlForm .saveButton').click(function() { 
    if (!$(this).closest('.dynamicHtmlForm').validate()) { 
    return false; 
    } 

    return true; 
}); 

E poi quando ho una forma di classe di dynamicHtmlForm, voglio essere in grado di fornire una validate personalizzato) Funzione (:

$('#myDynamicHtmlForm').validate = function() { 
    // do some validation 

    if (there are errors) { 
    return false; 
    } 

    return true; 
} 

Ma ottengo questo quando faccio questo:

$(this).closest(".dynamicHtmlForm").validate is not a function 

è quello che ho descritto anche possibile? In tal caso, cosa sto sbagliando?

Answer 1

jQuery.fn.validate = function(options) { 

    var defaults = { 
     validateOPtions1 : '', 
     validateOPtions2 : '' 
    }; 

    var settings = $.extend({}, defaults, options); 
    return this.each(function() {  
     // you validation code goes here 
    }); 
}; 

$(document).ready(function() { 

    $('selector').click(function() { 

     $('some selector').validate(); 

     // or if you used any options in your code that you 
     // want the user to enter. then you go :  
     $('some selector').validate({ 
      validateOPtions1: 'value1', 
      validateOPtions2: 'value2' 
     }); 

    }); 

}); 

Answer 2

Non stai aggiungendo la funzione all'elemento, lo stai aggiungendo al wrapper jQuery attorno all'elemento. Ogni volta che si passa un selettore a jQuery, si creerà un nuovo wrapper per gli elementi trovati:

$('#myEl'); // gives a jQuery wrapper object 
$('#myEl'); // creates another jQuery wrapper object 

Se si salva l'elemento avvolto a una variabile e l'uso che più tardi, sarebbe una storia diversa perché si' reaccesso all'oggetto wrapper jQuery salvato.

var dynamicHtmlForm = $('.dynamicHtmlForm'); 
dynamicHtmlForm.validate = function() { 
    return true; 
} 

$('.dynamicHtmlForm .saveButton').click(function() { 
    if (dynamicHtmlForm.validate()) { 
    return false; 
    } 

    return true; 
} 

Si potrebbe anche aggiungere la funzione direttamente all'elemento utilizzando

$('.dynamicHtmlForm')[0].validate = function() { return true; } 

// and later... 
if (!$(this).closest('.dynamicHtmlForm')[0].validate()) 

Oppure si poteva guardare ad estendere jQuery correttamente writing a plugin.

Answer 3

Sì, è tecnicamente possibile. Dovrai comunque fare riferimento all'elemento stesso e non alla raccolta jQuery. Questo dovrebbe funzionare:

$('.dynamicHtmlForm').each(function (ix,o) { 
    o.validate = function() { 
    return true; 
    } 
}); 

$('.dynamicHtmlForm .saveButton').click(function() { 
    if ($(this).closest('.dynamicHtmlForm')[0].validate()) { 
    return false; 
    } 

    return true; 
}