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

您需要委派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">

jQuery克隆div，同时删除内部img div src

2 个答案: