javascript - JQuery 克隆 div 同时删除内部 img div src

Question

我这里有这段代码，我正在克隆 div。现在克隆，没问题。现在这个克隆的 div 中有 img 标签，如果我现在点击添加新的，它会在上传时设置图像 src，然后它会克隆 div 以及带有预览的图像，因为我在里面有 img 标签，我想在 div 内部或外部使用相同的东西但在同一个位置。有什么想法吗？此外，当我在克隆新的 div 后上传图片时还有一件事是错误的，你会看到所有的工作只是运行代码段。

这是我的代码

$(".file-input-area").click(function() {
  $("#file-upload").click();


});


$('#copy-button').click(function() {
  var target = $('.clone-element:last');
  target.clone(true, true).insertAfter(target);
});

function readURL(input) {

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

    reader.onload = function(e) {
      $('#uploaded-image').attr('src', e.target.result).css({
        'width': '100%',
        'height': '120px'
      });

    }

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

$("#file-upload").change(function() {
  $(".file-input-area").hide();
  $(".uploaded-image-div").show();
  readURL(this);
});

.file-input-area {
  background: #e9e8e8;
  padding: 20px 0px 0px 0px;
  cursor: pointer;
  border: #263238 dashed 1px;
  border-radius: 3px;
  text-align: center;
  height: 92px;
  color: #e6294b;
  font-size: 14px;
  line-height: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row clone-element">
  <div class="col-md-6">
    <div class="form-group">
      <label>Upload Image</label>
      <input type="file" id="file-upload" style="display:none !important;" />

      <div class="file-input-area">

        <h3> <i class="fa fa-plus"></i> &nbsp;Upload File </h3>
        <span class="input-project1"> choose</span> to choose file.
      </div>
    </div>
    <div class="uploaded-image-div" style="display:none;">
      <img src="#" id="uploaded-image" alt="uploaded-image">
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <label>Description</label>
      <textarea rows="4" cols="5" class="form-control" placeholder="Enter your message here"></textarea>
    </div>
  </div>
</div>
<input type="button" class="btn btn-primary" id="copy-button" title="add new image and desciption" value="New image + Desc">

Answer 1

您需要委托(delegate)点击事件 "$("body").on("click", ".file-input-area", function () {"以便点击将与动态创建的元素和添加的代码一起使用将属性“src”设置为“#”。

    $().ready(function () {
        var objThis;
        $("body").on("click", ".file-input-area", function () {
            objThis = $(this).parents('.clone-element');
            $("#file-upload").click();
        });


        $('#copy-button').click(function () {
            var target = $('.clone-element:last');
            var cloneElement = target.clone();
            cloneElement.find('img').attr('src', '#');
            cloneElement.find('textarea').val('');
            cloneElement.find(".file-input-area").show();
            cloneElement.find(".uploaded-image-div").hide();

            cloneElement.insertAfter(target);
        });

        function readURL(input) {

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

                reader.onload = function (e) {
                    objThis.find('#uploaded-image').attr('src', e.target.result).css({
                        'width': '100%',
                        'height': '120px'
                    });
                }

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

        $("#file-upload").change(function () {
            objThis.find(".file-input-area").hide();
            objThis.find(".uploaded-image-div").show();
            readURL(this);
        });
    });

.file-input-area {
            background: #e9e8e8;
            padding: 20px 0px 0px 0px;
            cursor: pointer;
            border: #263238 dashed 1px;
            border-radius: 3px;
            text-align: center;
            height: 92px;
            color: #e6294b;
            font-size: 14px;
            line-height: 10px;
        }

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="row clone-element">
        <div class="col-md-6">
            <div class="form-group">
                <label>Upload Image</label>
                <input type="file" id="file-upload" style="display:none !important;" />

                <div class="file-input-area">

                    <h3> <i class="fa fa-plus"></i> &nbsp;Upload File </h3>
                    <span class="input-project1"> choose</span> to choose file.
                </div>
            </div>
            <div class="uploaded-image-div" style="display:none;">
                <img src="#" id="uploaded-image" alt="uploaded-image">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Description</label>
                <textarea rows="4" cols="5" class="form-control" placeholder="Enter your message here"></textarea>
            </div>
        </div>
    </div>
    <input type="button" class="btn btn-primary" id="copy-button" title="add new image and desciption" value="New image + Desc">