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

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

尝试更改此代码，希望它能正常工作

最后，我遇到了这个问题。你不需要readUrl函数实际上这个函数在每个profile-pic类中放置相同的src而不是我有一个替代解决方案，如下所示。

$("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]);
    }
});

使用上面的代码更改on change代码，它会为您提供所需的相同输出。

此外，您可以使用克隆方法最小化代码，而不是在附加中编写HTML。

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

Answer 2

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

因此，新创建的元素没有问题的事件侦听器。

尝试更改您的代码。

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

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

选中此fiddle

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

2 个答案: