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

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

img

看到您的js bin后，我将更新此答案。由于您已为其分配了ID，因此它正在更新图像预览。 ID应该是唯一的。因此，首先，我将从您的change元素中删除id属性，并在您的文件输入中删除data attributes事件，稍后我们可以将其与js动态绑定。为了通过js定位元素，尽管我们需要保留答复的数量，<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>对此非常有用。

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

现在，对于js，您在增加表单ID的正确位置上。我们也需要将其应用于其他元素，以便我们可以定位它们。

DOUBLE

克隆html表单标签后未显示图像预览

1 个答案: