javascript - 在许多元素上使用函数

Question

我有一个函数，可以验证附件的文件大小，并在文件大小超过设置的限制时添加错误，但它仅限于目前具有 id 的特定文件字段，我希望能够在许多文件字段上使用该函数。

如果用户想要添加两个图像，那么他们可以单击按钮来克隆文件字段。

// First Example with ID
$('#animal_image_file_0').bind('change', is_valid_dog_image_size);

function is_valid_dog_image_size() {
  $this = $('#animal_image_file_0');
    if($this[0].files[0].size < 3000000){ // valid
     if ($this.closest(".form-group").hasClass("has-error")) 
      $this.closest(".form-group").removeClass("has-error");
      $this.siblings(".help-inline, .form-inline .has-feedback .form-control-feedback, .has-feedback").css("display", "none");
    return true
  } else { // error
    if (!$this.closest(".form-group").hasClass("has-error")) 
      $this.closest(".form-group").addClass("has-error");
      $this.siblings(".help-inline, .form-inline .has-feedback .form-control-feedback, .has-feedback ").css("display", "block");
    return false;
   }
  }

所以我想将其应用于许多文件字段，我可以使用一个类，然后在单击克隆字段的按钮时使用 .on('click') 方法触发该函数，但是 $( 的分配this) 在函数中现在不起作用，是吗？

$('.add_nested_fields').on('click', function(){
  $('.animal_file').bind('change', is_valid_dog_image_size);
});

function is_valid_dog_image_size() {
  $this = $('.animal_file');
    if($this[0].files[0].size < 3000000){ // valid
     if ($this.closest(".form-group").hasClass("has-error")) 
      $this.closest(".form-group").removeClass("has-error");
      $this.siblings(".help-inline, .form-inline .has-feedback .form-control-feedback, .has-feedback").css("display", "none");
    return true
  } else { // error
    if (!$this.closest(".form-group").hasClass("has-error")) 
      $this.closest(".form-group").addClass("has-error");
      $this.siblings(".help-inline, .form-inline .has-feedback .form-control-feedback, .has-feedback ").css("display", "block");
    return false;
   }
  }

当我单击 .add_nested_fields 时，它会克隆文件字段，那么我如何才能确保我可以在 DOM 中此类的所有实例上使用相同的函数？

谢谢

Answer 1

主要问题是您将向每个字段附加多个处理程序:

$('.animal_file').bind

是有问题的，因为您只想处理新字段上的事件(其他处理程序保留)。适合您情况的最佳方法是使用委托(delegate)处理程序(JQuery 版本 1.4.2+ 和 1.7 )。这个想法是将事件处理程序附加到父元素上并针对目标进行过滤:

$('#parent-of-animal_file').on('change', '.animal-file', is_valid_dog_image_size);

然后，在您的处理程序中，只需使用 native this 并将其包装在 jQuery 对象中:

function is_valid_dog_image_size() {
  $this = $(this);
  ...