我正在使用 jquery 中继器 js 库来重复 html 但是当我尝试在嵌套中继器中添加元素时，外部中继器也被调用

Question

我正在使用 jquery 表单转发器 js 库进行重复 html 但是当我尝试在嵌套转发器中添加元素然后在转发器内添加一个按钮时，外部转发器也是在外部中继器的元素上调用和添加。

下面是我的 jQuery 和 HTML 代码：

<div id="m_repeater_3">
  <div class="form-group form-group-last row" id="m_repeater_3">
    <div data-repeater-list="color" class="col-lg-10">
      <div class="form-group row align-items-center">
        <div class="col-md-3">
          <div class="m-form__group--inline">
            <div class="m-form__label">
              <label class="m-label m-label--single">Color:</label>
            </div>
          </div>
        </div>
      </div>
      <div data-repeater-item class="form-group row align-items-center">
        <div class="col-md-3">
          <div class="m-form__group--inline">
            <div class="m-form__control">
              <input type="text" class="form-control" name="color" placeholder="Color" required="required">
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="m-form__group--inline">
            <div class="m-form__control">
              <input type="file" class="form-control" name="image_4" required="required">
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <a href="javascript:;" data-repeater-delete="" class="btn-sm btn btn-danger btn-bold">
            <i class="la la-trash-o"></i>
          </a>
        </div>
        <div id="m_repeater_2">
          <div class="form-group form-group-last row" id="m_repeater_2">
            <div data-repeater-list="stock" class="col-lg-10">
              <div class="form-group row align-items-center">
                <div class="col-md-3">
                  <div class="m-form__group--inline">
                    <div class="m-form__label">
                      <label class="m-label m-label--single">Size:</label>
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="m-form__group--inline">
                    <div class="m-form__label">
                      <label class="m-label m-label--single">Stock:</label>
                    </div>
                  </div>
                </div>
              </div>
              <div data-repeater-item class="form-group row align-items-center">
                <div class="col-md-3">
                  <div class="m-form__group--inline">
                    <div class="m-form__control">
                      <input type="text" class="form-control" name="Size" placeholder="Color" required="required">
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="m-form__group--inline">
                    <div class="m-form__control">
                      <input type="text" class="form-control" name="stock" placeholder="Color" required="required">
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <a href="javascript:;" data-repeater-delete="" class="btn-sm btn btn-danger btn-bold">
                    <i class="la la-trash-o"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group form-group-last row">
            <label class="col-lg-2 col-form-label"></label>
            <div class="col-lg-4">
              <a href="javascript:;" data-repeater-create="" class="btn btn-bold btn-sm btn-brand">
                <i class="la la-plus"></i> Add
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group form-group-last row">
    <label class="col-lg-2 col-form-label"></label>
    <div class="col-lg-4">
      <a href="javascript:;" data-repeater-create="" class="btn btn-bold btn-sm btn-brand">
        <i class="la la-plus"></i> Add
      </a>
    </div>
  </div>
</div>

这是我的 jquery 函数，我将其用于转发器

var FormRepeater = function() {
  var demo2 = function() {
    $('#m_repeater_3').repeater({
      initEmpty: false,
      defaultValues: {
        'code': ''
      },
      show: function() {
        $(this).slideDown("slow", function() {});
      },
      hide: function(deleteElement) {
        $(this).slideUp(deleteElement);
      }
    });
  }
  var demo3 = function() {
   $('#m_repeater_2').repeater({
      initEmpty: false,
      defaultValues: {
        'code': ''
      },
      show: function() {
        $(this).slideDown("slow", function() {});
      },
      hide: function(deleteElement) {
        $(this).slideUp(deleteElement);
      }
    });
  }
  return {
    // public functions
    init: function() {
      demo2();
      demo3();
    }
  };
}();

Answer 1

var FormRepeater = function() {
            var demo2 = function() {
                $('#m_repeater_3').repeater({
                    initEmpty: false,
                    defaultValues: {
                        'code': ''
                    },
                    repeaters: [{
                    // (Required)`enter code here`
                    // Specify the jQuery selector for this nested repeater
                    selector: '.inner-repeater'
                    }],


                    show: function() {
                        $(this).slideDown("slow", function() {});
                    },

                    hide: function(deleteElement) {
                        $(this).slideUp(deleteElement);
                    }
                });
            }
            return {
                // public functions
                init: function() {
                    demo2();
                }
            };
        }();

我正在使用 jquery 中继器 js 库来重复 html 但是当我尝试在嵌套中继器中添加元素时，外部中继器也被调用

I am using jquery repeater js library for repeat html but when i am trying to add element in nested repeater then outer repeater also called

html

javascript

jquery

repeater

nested