appendTo same div

Question

Ich habe dieses Problem mit Jquery/Dropzone im Moment. Nachdem ich ein Bild mit Dropzone hinzugefügt habe, lädt es das Bild hoch und fügt ein Div hinzu, innerhalb dessen ich ein verstecktes Eingabefeld angehängt habe. Das Problem ist, wenn ich ein anderes Bild herauflade, fügt es das verborgene Eingabefeld vom zweiten Bild zu beiden divs hinzu. Ich hoffe, ich bin klar!

Hier ist meine Jquery-Code, nachdem ein Bild hochgeladen ausführt:

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

Dies ist der HTML sollte es appendTo:

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

ich keine Ahnung, wie das Recht haben, Eingang anfügen Feld auf der rechten Div, ich hoffe, jemand kann mir helfen!

Answer 1

'.action-buttons' wird alle Elemente mit class="action-buttons" auswählen. Wenn es zwei davon gibt, werden beide ausgewählt. Gleiches gilt für drei, vier fünf, wie viele es auch sind. Und .append() wird doppelte Inhalte an alle von ihnen anhängen.

Sie müssen nur das eine Element von Interesse auswählen, das ich kenne, ist die :last.

Versuchen

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

Answer 2

Von dem, was ich verstehe, und sagen Sie es nur auf das erste div tun wollen, so etwas wie dieses

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

Wie ich in den Kommentaren gesagt, müssen Sie eine Auswahl spezifische div für den Zweck, so gehen Sie für id stattdessen.