追加到同一个div

Question

我现在有Jquery / Dropzone这个问题。在我添加了带有dropzone的图像后，它上传了图片并添加了一个div，在这个div中我附加了一个隐藏的输入字段。问题是，当我上传另一个图像时，它将隐藏的输入字段从第二个图像添加到两个div。我希望我清楚！

这是我的Jquery代码，它将在上传图像后执行：

// on success add a hidden field with the img path
myDropzone.on("success", function(file, response) {
  console.log(response);
  $('<input>').attr({
    type: 'hidden',
    name: 'img_path',
    id: 'uploadedImg',
    value: response
  }).appendTo('.action-buttons').next();
});

这是应该追加的html：

    <!-- dropbox -->
<div class="box box-primary">
    <div class="box-body upload-form">
        <h5>Voeg afbeeldingen toe aan uw filiaal.</h5>
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Voeg afbeeldingen toe...</span>
        </span>

        <button type="reset" class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>Anuleer upload</span>
        </button>

        <!-- The global file processing state -->
        <span class="fileupload-process">
            <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0"
                 aria-valuemax="100" aria-valuenow="0">
              <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
            </div>
        </span>


        <div class="table table-striped files" id="previews">
            <div id="template" class="file-row">
                <!-- This is used as the file preview template -->
                <div>
                    <span class="preview"><img data-dz-thumbnail/></span>
                </div>
                <div>
                    <p class="name" data-dz-name></p>
                    <strong class="error text-danger" data-dz-errormessage></strong>
                </div>
                <div>
                    <p class="size" data-dz-size></p>
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0"
                         aria-valuemax="100" aria-valuenow="0">
                        <div class="progress-bar progress-bar-success" style="width:0%;"
                             data-dz-uploadprogress></div>
                    </div>
                </div>
                <div class="action-buttons">
                    <button class="btn btn-primary start">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Start</span>
                    </button>
                    <button data-dz-remove class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel</span>
                    </button>
                    <button data-dz-remove class="btn btn-danger delete dz-remove">
                        <i class="glyphicon glyphicon-trash"></i>
                        <span>Delete</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

我不知道如何将正确的输入字段附加到正确的div，我希望有人可以帮助我！

Answer 1

'.action-buttons'将用class="action-buttons"选择所有元素。如果有两个，则两个都将被选中。三，四五相同，但有很多。并且.append()将向所有人添加重复内容。

你只需要选择一个感兴趣的元素，我正在猜测的是:last。

尝试

}).appendTo($('.action-buttons').filter(":last"));

Answer 2

根据我的理解并说你想要只做第一个div，就像这样

myDropzone.on("success", function(file, response) {
  console.log(response);
  $('.action-buttons : first').append('<input type="hidden" name="img_path" id="uploadedImg" value="'+ response +'"></input>');
});

正如我在评论中所说，你必须为此目的选择一个特定的div，所以请选择id。