Tengo 2 campos de entrada 1 para imagen y 1 para video. Quiero agregar más campos cuando se presiona el botón + Agregar más. Aquí está el código
<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 fw-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=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>"); $(".partPending").last().after(html); }); $("body").on("click",".remove",function(){ $(this).parents(".partPending").remove(); });¿Cómo puedo obtener el resultado deseado? Por favor ayuda
su problema es sobre el selector de CSS incorrecto:
$("body").on("click",".add-more",function(){debiera ser :
$("body").on("click","#add-more",function(){TAMBIÉN, sus códigos agregarán correctamente el elemento deseado, pero el contenido del elemento no es nada, por lo que no puede verlo. puede darle algo de estilo al elemento para verlo:
.partPending { display:block; background:yellow; height: 20px; border:1px black solid; width:100%; }compruébalo en el fragmento:
$("body").on("click","#add-more",function(){ var html = $(".partPending").first().clone(); $(html).find(".change").html("<label for=''> </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 fw-500" href="javascript:;" id="add-more"><i class="icons icon-plus font-weight-bold mr-1"></i>@lang('app.addMore')</a> </div> </div>