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集合。这应该有效：

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

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

  return true;
}

Answer 2

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 3

您没有将该函数添加到元素中，而是将其添加到元素周围的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())

或者您可以通过writing a plugin正确扩展jQuery。

如何通过jQuery向元素添加函数？

3 个答案: