0

Olá,

Estou criando um recurso onde o mecanismo deve:

  1. escolher uma imagem no input
  2. ao realizar o change do input, um novo é criado via js ao lado
  3. chegando aí, preciso de ajuda, pq a função só executa no primeiro input, e para de funcionar nos demais... Como faço para que a função do change, continue funcionando em todos os inputs?

Coloquei o código completo no jsfiddle: https://jsfiddle.net/sb9c32qe/2/

e o trecho do js para ser ajudado, vou colocar aqui tbm:

$(".dragNdropUpload_box input").change(function(){                                      

  var create_dragNdropUpload_box =  "<div class='dragNdropUpload_box'>"+
     "<div class='dragNdropUpload_box_input_layout'>"+  
     "<span class='icon far fa-plus-square'></span>"+
     "<span class='text'></span>"+
     "</div><!-- /dragNdropUpload_box_input_layout-->"+
     "<input type='file' name='dragNdropUpload_box[]' />"+
     "</div><!-- /dragNdropUpload_box-->";                                                                                                    


  $(".dragNdropUpload").append(create_dragNdropUpload_box);

  //setTimeout(function(){ 

  var getFileName = $(this).val().split('\\').pop();    
  alert(getFileName);   


  $(this).parent().find(".dragNdropUpload_box_input_layout .text").html(getFileName);

  //}, 1000);                   

});//end change
1

1 Resposta 1

1

Como os elementos seguintes são dinâmicos, você precisa realizar o bind do handler change no document.

Assim, ao invés de utilizar $(".dragNdropUpload_box input").change(function(){ ...

Utilize $(document).on("change", ".dragNdropUpload_box input", (function(){ ...

Altere para:

$(document).on("change", ".dragNdropUpload_box input", (function(){														
	var create_dragNdropUpload_box =  "<div class='dragNdropUpload_box'>"+
"<div class='dragNdropUpload_box_input_layout'>"+
"<span class='icon far fa-plus-square'></span>"+
"<span class='text'></span>"+
"</div><!-- /dragNdropUpload_box_input_layout-->"+
"<input type='file' name='dragNdropUpload_box[]' />"+
"</div><!--/dragNdropUpload_box-->";												 													  
													  							
	$(".dragNdropUpload").append(create_dragNdropUpload_box);
	var getFileName = $(this).val().split('\\').pop();	
	$(this).parent().find(".dragNdropUpload_box_input_layout .text").html(getFileName);					
}));
body{
	text-align:center;
}
.dragNdropUpload{
	display:inline-block;
	width:1000px;
	max-width:95%;
	margin:10% 0 0 0;
	padding:20px 0 20px 0;
	border:0px solid #c9ceda;		
}
.dragNdropUpload_box{
	display:inline-block;
	position:relative;
	width:200px;
	height:200px;
	margin:0 20px 0 0;
	border:2px dashed #c9ceda;
	cursor:pointer;
}
.dragNdropUpload_box:hover{
	border:2px dashed #a5adbd;	
}
.dragNdropUpload_box:hover .dragNdropUpload_box_input_layout .icon{
	color:#a5adbd;
}
.dragNdropUpload_box_input_layout{
	display:inline-block;
	width:100%;
	height:100%;
	background-color:transparent;	
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}
.dragNdropUpload_box_input_layout span{
	display:inline-block;
}
.dragNdropUpload_box_input_layout .icon{
	display:inline-block;
	font-size:68px;
	margin:32% 0 0 0;
	color:#c9ceda;	
}
.dragNdropUpload_box_input_layout .text{
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	padding:5px 0 15px 0;
	font-size:15px;
	font-family:arial;
	color:#adb5c7;
}
.dragNdropUpload_box input{
	display:inline-block;
	width:100%;
	height:100%;
	padding:10px 10px 10px 10px;
	background-color:#eee;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	opacity:0;
	cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragNdropUpload">
	
	<div class="dragNdropUpload_box">
		<div class="dragNdropUpload_box_input_layout">
			<span class="icon far fa-plus-square"></span>
			<span class="text"></span>
		</div><!-- /dragNdropUpload_box_input_layout-->		
		<input type="file" name="dragNdropUpload_box[]" />		
	</div><!-- /dragNdropUpload_box-->
	
</div><!-- /dragNdropUpload-->

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .