2017-09-21 22 views
0

誰でも自分のコードに何が間違っているかを表示できますか?これは、変更入力した後に画像を表示するが、それでも最初の入力でここJquery、変更後の画像入力

It changes only first input everytime

あなたのDOMがされているので、コードあなたはjQueryののデリゲートイベントを使用する必要が

$(document).ready(function() { 
 

 

 
    function readURL(input, data) { 
 
    if (input.files && input.files[0]) { 
 
     var reader = new FileReader(); 
 

 
     reader.onload = function(e) { 
 
     var blah = '#blah' + data; 
 
     $(blah).attr('src', e.target.result); 
 
     } 
 

 
     reader.readAsDataURL(input.files[0]); 
 
    } 
 
    } 
 

 
    $(".active_file").change(function() { 
 
    var data = $(this).data('im'); 
 
    var img_div = '#img_div' + data; 
 
    var img_id = '#image_id' + data; 
 
    $(img_id).html('<img id="blah' + data + '" src="#" alt="your image" />'); 
 
    alert(data); 
 
    readURL(this, data); 
 
    data = data + 1; 
 
    $(this).removeClass('active_file'); 
 
    $(img_div).after('<div class="col-md-2 img_div" id="img_div' + data + '" ><input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im=' + data + '><label class="col-md-12 image " for="fileI" id = "image_id' + data + '"> <i class="fa fa-cloud-upload"></i><br>Nahrať obrázok..</label></div>'); 
 

 

 

 
    }); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 

 

 
    <div class="col-md-6 gallery"> 
 
    <div class="row galeria_row"> 
 
     <div class="col-md-2 img_div" id="img_div1"> 
 
     <input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='1'> 
 
     <label class="col-md-12 image " for="fileI" id="image_id1"> <i class="fa fa-cloud-upload"></i> 
 
      <br>Nahrať obrázok..</label> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
</div>

+0

あなたはより完全なコードを追加することができますか? –

+0

が更新されました...画像でその部分の完全なコードです – errorqo

+0

JS部分..削除

関連する問題