Das gleiche Bild wird für alle Optionen hochgeladen

Question

Ich habe eine dynamische Website. Ich möchte die Details der verschiedenen Elemente einschließlich ihres Bildes akzeptieren. Die js funktioniert aber nur für einen Gegenstand. In dem Moment, in dem ich ein anderes Objekt hinzufüge und versuche, ein anderes Bild hochzuladen, öffnet es entweder den Dialog nicht oder es wird das gleiche Bild für alle Objekte erstellt. Für einzelne Artikel funktioniert der Code einwandfrei. Dies ist meine fiddle.

$(".file-upload").on('change', function(){ 
    readURL(this); 
}); 
$(".upload-button").on('click', function() { 
    $(".file-upload").click(); 
}); 
$("#additem").click(function() { 
    $(".grid").append('<div class="cell" style="overflow: hidden; visibility:;"><form><fieldset style="color:white;"><legend>Item Details</legend><img class="profile-pic" src="" /><div class="upload-button" style="cursor:pointer;">Upload Image</div></br><input class="file-upload" type="file" accept="image/*"/></br><p><input type="text" placeholder="Item name"/></br><p><input type="text" placeholder="Item category"/></br><p><input type="number" placeholder="Number of items"/></br><p><input id="itemsubmit" type="submit" class="btn" value="Add Item"/></br></fieldset></form></div>'); 
}); 

Ich fühle, dass meine js nur für ein Element arbeitet. Wenn mir jemand sagen kann, wo ich falsch liege. Danke im Voraus.

Answer 1

Es scheint, dass Sie zu sein werden, um die Form auf die Schaltfläche klicken, einige neue Steuerelemente dynamisch hinzufügen.

Also die neu erstellten Elemente hat keinen Event-Listener, der das Problem ist.

Versuchen Sie, Ihren Code so zu ändern.

$("body").on('change', '.file-upload', function() { 
    /* Your code goes here. */ 
    }); 

    $("body").on('click', '.upload-button', function() { 
    $(this).parent().find('.file-upload').click(); 
    }); 

prüfen diese fiddle

Answer 2

$(document).on('click','.upload-button', function(){ 
    $(this).closest(".cell").find('.file-upload').click(); 
}) 

versuchen diesen Code mit wechselnden hoffen, dass es endlich

arbeiten, ich das Problem habe. Sie brauchen keine readUrl-Funktion, diese Funktion fügt dieselbe src in jede profile-pic-Klasse ein, anstatt dass ich eine alternative Lösung habe, die wie folgt ist.

$("body").on('change', '.file-upload', function() { 
    var profile = $(this).closest('.cell').find('.profile-pic'); 
     if (this.files && this.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
      $(profile).attr('src', e.target.result); 
     } 

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

ändern on change Code mit obigem Code und es wird Ihnen die gleiche Leistung geben, wie Sie fordern.

Sie können den Code auch minimieren, indem Sie clone method verwenden, anstatt HTML in append zu schreiben.

$("#additem").click(function() { 
    var clone = $('.grid .cell:first-child').clone(); 
    $(".grid").append(clone); 
})