使用 jquery 添加更多字段

Question

我有 2 个输入字段，1 个用于图像，1 个用于视频。 当按下+添加更多按钮时，我想添加更多字段。 这是代码

<div class="row p-20 partPending">
<div class="col-lg-6">
<x-forms.file allowedFileExtensions="png jpg jpeg" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partImage')" fieldName="part_image"
                            fieldId="part_image" />
</div>
<div class="col-lg-6">
<x-forms.file allowedFileExtensions=" mp4 avi " allowedFileSize=" 1mb" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partVideo')" fieldName="part_video"
                            fieldId="part_video" />
</div>
</div>
 <div class="row px-lg-4 px-md-4 px-3 pb-3 pt-0 mb-3  mt-2">
 <div class="col-md-12">
 <a class="f-15 f-w-500" href="javascript:;" id="add-more"><i
 class="icons icon-plus font-weight-bold mr-1"></i>@lang('app.addMore')</a>
 </div>
 </div>

$("body").on("click",".add-more",function(){ 
var html = $(".partPending").first().clone();
$(html).find(".change").html("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".partPending").last().after(html);
});
 $("body").on("click",".remove",function(){ 
        $(this).parents(".partPending").remove();    
});

我怎样才能得到想要的结果。请帮忙

Answer 1

您的问题是关于错误的 CSS 选择器：

$("body").on("click",".add-more",function(){ 

应该是：

$("body").on("click","#add-more",function(){ 

此外，您的代码将正确添加您想要的元素，但元素内容什么都不是，因此您无法查看它。 您可以为元素获取一些样式以进行查看：

.partPending {
   display:block;
   background:yellow;
   height: 20px;
   border:1px black solid;
   width:100%;
}

在 sn-p 中检查它：

$("body").on("click","#add-more",function(){ 
var html = $(".partPending").first().clone();
$(html).find(".change").html("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".partPending").last().after(html);
});
 $("body").on("click",".remove",function(){ 
        $(this).parents(".partPending").remove();    
});

div{
background : green;
}
.partPending {
   display:block;
   background:yellow;
   height: 20px;
   border:1px black solid;
  width:100%;
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row p-20 partPending">
<div class="col-lg-6">
<x-forms.file allowedFileExtensions="png jpg jpeg" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partImage')" fieldName="part_image"
                            fieldId="part_image" />
</div>
<div class="col-lg-6">
<x-forms.file allowedFileExtensions=" mp4 avi " allowedFileSize=" 1mb" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partVideo')" fieldName="part_video"
                            fieldId="part_video" />
</div>
</div>
 <div class="row px-lg-4 px-md-4 px-3 pb-3 pt-0 mb-3  mt-2">
 <div class="col-md-12">
 <a class="f-15 f-w-500" href="javascript:;" id="add-more"><i
 class="icons icon-plus font-weight-bold mr-1"></i>@lang('app.addMore')</a>
 </div>
 </div>