Dynamic upload input layout with gallery

Question

Hello,

I’m creating a resource where the mechanism should:

1. choose an image in the input
2. when performing input change, a new one is created via js next
3. when I get there, I need help, because the function only runs in the first input, and stops working on others... How do I get the change function to continue working on all inputs?

I put the full code in jsfiddle: https://jsfiddle.net/sb9c32qe/2/

and the section of js to be helped, I will put here 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

Answer 1

As the following elements are dynamic, you need to realize the bind of Handler change in the Document.

So instead of using $(".dragNdropUpload_box input"). change(Function(){ ...

Utilize $(Document). on("change", ". dragNdropUpload_box input", (Function(){ ...

Change to:

$(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-->