jQueryの/ JavaScriptの

Question

を使用して動的な入力ファイルのフィールドにファイル名を選択しなさい、私はもっとをクリックして追加することができ、ダイナミック入力タイプファイルフィールドを追加しているより多くの私はそれを選択したときに、ファイル名を取得するためにスクリプト化している

、それは他のフィールドではなく、最初のフィールドだけで動作しています。

どのようにしてファイル名を選択するのですか？

$("#em_add").click(function(){ 
 
\t \t \t var decoration_box = $(".one").html(); 
 
\t \t \t $(".logos").append('<div class="one">'+decoration_box+'</div>'); 
 
}); 
 

 
$('.logo').change(function() { 
 
\t var filePath=$(this).val(); 
 
\t alert(filePath); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="em_add">Add New</button> 
 
<div class="logos"> 
 

 
    <div class="one"> 
 
    <input type="file" name="logo[]" id="logo" class="logo" /> 
 
    </div> 
 
    
 
</div>

Answer 1

あなたは、動的に要素を追加しているが、あなたが追加するときには、これらの新しい要素にイベントハンドラをアタッチされていません。これを修正するには、イベントの委任を使用するには、イベントを親の.logosに添付します。

$("#em_add").click(function(){ 
 
\t \t \t var decoration_box = $(".one").html(); 
 
\t \t \t $(".logos").append('<div class="one">'+decoration_box+'</div>'); 
 
}); 
 

 
$('.logos').on('change', '.logo', function() { 
 
\t var filePath=$(this).val(); 
 
\t alert(filePath); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="em_add">Add New</button> 
 
<div class="logos"> 
 

 
    <div class="one"> 
 
    <input type="file" name="logo[]" id="logo" class="logo" /> 
 
    </div> 
 
    
 
</div>

Answer 2

Jquery .on('change') not firing for dynamically added elements

$("#em_add").click(function(){ 
 
\t \t \t var decoration_box = $(".one").html(); 
 
\t \t \t $(".logos").append('<div class="one">'+decoration_box+'</div>'); 
 
}); 
 

 
$('.logos').on('change', 'input:file', function() { 
 
\t var filePath=$(this).val(); 
 
\t alert(filePath); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="em_add">Add New</button> 
 
<div class="logos"> 
 

 
    <div class="one"> 
 
    <input type="file" name="logo[]" id="logo" class="logo" /> 
 
    </div> 
 
    
 
</div>

を参照してください。