删除内部img div src时的JQuery Clone div

Question

我在这里克隆了这个代码。现在克隆，这很好。现在在这个克隆的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

您需要委派click事件“$（”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">

Answer 2

请检查以下代码。我已经完成了html和javascript的更改。

当你使用像克隆这样的东西并有多个项目时，你应该避免使用id。使用类名和父，子，兄弟关系来查找元素。

$(".file-input-area").click(function() {
  $(this).parent().find(".file-upload").click();


});


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

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

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

    }

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

$(".file-upload").change(function() {
  $(this).parent().find(".file-input-area").hide();
  $(this).parent().parent().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>
      <!-- Added file-upload class -->
      <input type="file" id="file-upload" class="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;">
      <!-- Added uploaded-image class -->
      <img src="#" id="uploaded-image" class="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">