提问人：Rishikesh Singh 提问时间：1/9/2021 最后编辑：Louys Patrice BessetteRishikesh Singh 更新时间：1/18/2021 访问量：3410
我正在使用 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
问：
我正在使用 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();
}
};
}();
答：
1赞
Rishikesh Singh
1/18/2021
#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();
}
};
}();
评论