javascript - 为所有选项上传相同的图像

Question

我有一个动态网站。我想接受不同元素的详细信息，包括它们的图像。 js 正在工作，但仅适用于一项。当我添加另一个元素并尝试上传不同的图片时，它要么不会打开对话框，要么会为所有元素拍摄相同的图像。对于单个元素，代码工作正常。这是我的 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>');
});

我觉得我的 js 只对一个元素有效。如果有人能告诉我我哪里出错了。提前致谢。

Answer 1

您似乎是在单击按钮时向表单动态添加一些新控件。

所以新创建的元素没有事件监听器。

尝试像这样更改您的代码。

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

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

检查这个fiddle