Jquery，更改输入后显示的图像

Question

谁能告诉我我的代码有什么问题？它在更改输入后显示图片但仍处于第一次输入

It changes only first input everytime

这是代码

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

Answer 1

您需要使用 jQuery 的委托事件，因为您的 DOM 正在实时更新。所以不要这样做：

 $(".active_file").change(function() {

这样做

$(document).on('change', '.active_file', function(){

$(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]);
    }
}

$(document).on('change', '.active_file', 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>

Jquery，更改输入后显示的图像

Jquery, image showing after change input

html

javascript

jquery

onchange