如何正确重新初始化jquery.repeater插件

jquery.repeater官方并没有提供现成的destroy方法，但可以通过手动清理DOM和事件绑定的方式实现重置，避免重复初始化导致的重复项问题，具体步骤如下：

• 清理插件绑定的事件
  先解绑插件为.repeater元素及其子元素绑定的所有事件，防止旧事件残留：

  // 解绑repeater容器及内部所有元素的相关事件
  $('.repeater').off('click keydown change');
  $('.repeater *').off('click keydown change');
  

• 重置DOM结构
  移除插件生成的控制按钮（添加/删除按钮）、动态生成的重复项，只保留初始的原始表单结构：

  // 移除所有动态添加的重复项（保留第一个原始项）
  $('.repeater .repeater-item:not(:first)').remove();
  // 移除插件自动生成的模板容器和控制按钮
  $('.repeater .repeater-template, .repeater .repeater-add-btn').remove();
  

• 重新初始化插件
  完成清理后，带上你的配置参数重新调用初始化方法：

  $('.repeater').repeater({
    // 你的自定义配置示例
    show: function() {
      $(this).fadeIn();
    },
    hide: function(remove) {
      $(this).fadeOut(remove);
    },
    isFirstItemUndeletable: true
  });
  

封装成工具函数（方便AJAX回调中调用） #

把上述逻辑封装成函数，在AJAX请求完成、添加完额外字段后直接调用：

function resetAndInitRepeater() {
  // 清理事件
  $('.repeater').off();
  $('.repeater *').off();
  // 重置DOM
  $('.repeater .repeater-item:not(:first)').remove();
  $('.repeater .repeater-template, .repeater .repeater-add-btn').remove();
  // 重新初始化
  $('.repeater').repeater({
    // 填入你的插件配置
    isFirstItemUndeletable: true
  });
}

// 在AJAX回调中使用
$.ajax({
  url: '/your-api-endpoint',
  method: 'POST',
  success: function(response) {
    // 将AJAX返回的额外字段插入到repeater容器中
    $('.repeater').append(response.newFields);
    // 重置并重新初始化插件
    resetAndInitRepeater();
  }
});

注意事项 #

• 确保在AJAX回调中，新字段插入DOM完成后再执行重置逻辑
• 如果你的重复项模板是动态加载的，要确保模板元素正确插入后再初始化插件
• 若初始表单没有默认的重复项，可根据需求调整DOM重置的逻辑（比如保留模板元素而非第一个项）

内容的提问来源于stack exchange，提问作者vance