如何通過jQuery爲元素添加一個函數？

Question

我想要做這樣的事情：

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

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

    return true; 
}); 

，然後當我有類dynamicHtmlForm的一種形式，我希望能夠提供一個自定義的validate（）函數：

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

    if (there are errors) { 
    return false; 
    } 

    return true; 
} 

但我這樣做時，我這樣做：

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

是我所描述的甚至可能嗎？如果是這樣，我做錯了什麼？

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

您不是將函數添加到元素，而是將它添加到元素周圍的jQuery包裝器中。如果您保存包裹元素給一個變量和使用以後，這將是一個不同的故事，因爲你」

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

：每一次你通過一個選擇器，jQuery的時候，它會爲找到的元素的新包裝重新訪問保存的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()) 

元素或者你可以看看由writing a plugin適當延長jQuery的。

Answer 3

是的，這在技術上是可行的。但是，您需要引用元素本身，而不是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; 
}