Как я добавляю функцию к элементу с помощью jQuery?
Я хочу сделать что-то вроде этого:
$('.dynamicHtmlForm').validate = function() {
return true;
}
$('.dynamicHtmlForm .saveButton').click(function() {
if (!$(this).closest('.dynamicHtmlForm').validate()) {
return false;
}
return true;
});
И затем когда у меня есть форма класса dynamicHtmlForm, я хочу смочь обеспечить, пользовательское проверяют () функцию:
$('#myDynamicHtmlForm').validate = function() {
// do some validation
if (there are errors) {
return false;
}
return true;
}
Но я получаю это, когда я делаю это:
$(this).closest(".dynamicHtmlForm").validate is not a function
То, что я описал даже возможный? Если так, что я делаю неправильно?
3 ответа
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'
});
});
});
Да, технически это возможно. Однако вам нужно будет ссылаться на сам элемент, а не на коллекцию jQuery. Это должно сработать:
$('.dynamicHtmlForm').each(function (ix,o) {
o.validate = function() {
return true;
}
});
$('.dynamicHtmlForm .saveButton').click(function() {
if ($(this).closest('.dynamicHtmlForm')[0].validate()) {
return false;
}
return true;
}
Вы не добавляете функцию к элементу, вы добавляете ее в оболочку jQuery вокруг элемента. Каждый раз, когда вы передаете селектор в jQuery, он создает новую оболочку для найденных элементов:
$('#myEl'); // gives a jQuery wrapper object
$('#myEl'); // creates another jQuery wrapper object
Если вы сохраните завернутый элемент в переменную и используете ее позже, это будет совсем другая история, потому что вы получаете доступ к сохраненному Объект-оболочка jQuery.
var dynamicHtmlForm = $('.dynamicHtmlForm');
dynamicHtmlForm.validate = function() {
return true;
}
$('.dynamicHtmlForm .saveButton').click(function() {
if (dynamicHtmlForm.validate()) {
return false;
}
return true;
}
Вы также можете добавить функцию непосредственно к элементу, используя
$('.dynamicHtmlForm')[0].validate = function () { return true; }
// and later...
if (!$(this).closest('.dynamicHtmlForm')[0].validate())
. Или вы можете посмотреть, как правильно расширить jQuery, написав плагин .