Предварительный просмотр изображения не отображается после клонирования HTML-тега формы

Question

Я создал систему вложенных комментариев, используя html, jQuery, Ajax и Javascript. Для каждой кнопки ответа я создал те же функции ввода, что и в исходном сообщении, которые включают: (1) предварительный просмотр изображения перед загрузкой и (2) загрузку изображения. Для этого я использовал метод клонирования jQuery.

Однако, после нажатия кнопки ответа и клонирования формы, она показывает предварительный просмотр изображения в исходном сообщении, а не в ответном сообщении.

Вот ссылка на JS Bin: https://jsbin.com/xexejur/edit?html,js,output

Вот код:

HTML

<form id="form_clone" method="post" enctype="multipart/form-data">
  <div>
    <img id="image_Preview" width="100" height="100" />
    <input type="file" onchange="document.getElementById('image_Preview').src = window.URL.createObjectURL(this.files[0])">
  </div>
  <div>
    <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
  </div>
</form>

<div>
 <button type="button" class="btn btn-default reply">Reply</button>
</div>

Javascript

$(document).ready(function(){

    $(document).on('click', '.reply', function(event){
      var form_clone = $('#form_clone').clone();
      var target = $(event.target);
      var isFormAvailable = $('#form_clone', target).length > 0;
      if(!isFormAvailable) {
        $(event.target).append(form_clone);
      }
    });

}); 

Answer 1

$(document).ready(function() {
    var cloneCount = 0;
    var bindFileChange = function (cloneCount){
        let fileInput = $('input[type="file"][data-count="' + cloneCount +'"]');
        fileInput.on('change', function (){
            $(this).siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
        });
    };


   $("button").click(function(){
       cloneCount++;
       $("#id0").clone().attr('id', 'id'+ cloneCount).insertAfter("#id" + (cloneCount - 1));
       $('#id' + cloneCount).find('input[type="file"]').first().attr('data-count', cloneCount);
       bindFileChange(cloneCount);
   }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="id0" method="post" enctype="multipart/form-data" data-count="0">
    <div>
        <img class="image_Preview" width="100" height="100" />
        <input type="file" class="fileUpload" data-count="0">
    </div>
    <div>
        <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
    </div>
</form>
<button id="click">Reply</button>

Я обновлю этот ответ после просмотра вашего js bin. Он обновляет предварительный просмотр изображения, потому что вам назначен идентификатор. Идентификаторы должны быть уникальными. Итак, во-первых, я бы удалил атрибут id из ваших элементов img, а также удалил событие change при вводе файла, мы можем связать его динамически с помощью js позже. Для нацеливания на элементы с помощью js, хотя нам потребуется вести подсчет ответов, для этого пригодится data attributes.

<form id="id0" method="post" enctype="multipart/form-data" data-count="0">
    <div>
        <img class="image_Preview" width="100" height="100" />
        <input type="file" class="fileUpload" data-count="0">
    </div>
    <div>
        <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
    </div>
</form>
<button id="click">Reply</button>

Теперь для js вы на правильном пути, увеличивая идентификатор формы. Нам нужно применить это и к другим элементам, чтобы мы могли нацеливаться на них.

$(document).ready(function() {
    var cloneCount = 0;
    var bindFileChange = function (cloneCount){
        let fileInput = $('input[type="file"][data-count="' + cloneCount +'"]');
        fileInput.on('change', function (){
            $(this).siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
        });
    };


   $("button").click(function(){
       cloneCount++;
       $("#id0").clone().attr('id', 'id'+ cloneCount).insertAfter("#id" + (cloneCount - 1));
       $('#id' + cloneCount).find('input[type="file"]').first().attr('data-count', cloneCount);
       bindFileChange(cloneCount);
   }); 
});