¿Cómo agrego una función a un elemento a través de jQuery?

Question

quiero hacer algo como esto:

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

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

    return true; 
}); 

Y luego, cuando tengo una forma de dynamicHtmlForm clase, quiero ser capaz de proporcionar una validación personalizada función():

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

    if (there are errors) { 
    return false; 
    } 

    return true; 
} 

Pero Entiendo esto cuando hago esto:

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

¿Es lo que he descrito posible? Si es así, ¿qué estoy haciendo mal?

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

No está agregando la función al elemento, la está agregando al contenedor jQuery alrededor del elemento. Cada vez que pasa un selector de jQuery, se creará un nuevo contenedor para los elementos que se encuentran:

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

Si guarda el elemento envuelto en una variable y el uso que más adelante, sería una historia diferente porque' volver a acceder al objeto jQuery wrapper guardado.

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

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

    return true; 
} 

También puede añadir la función directamente al elemento utilizando

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

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

O usted podría mirar a extender jQuery adecuadamente por writing a plugin.

Answer 3

Sí, es técnicamente posible. Sin embargo, deberá hacer referencia al elemento en sí, y no a la colección jQuery. Esto debería funcionar:

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

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

    return true; 
}