Question

我创建了一个动态创建输入字段的按钮。上传文件后，应预览图像。但是发现，首先预览一个图像，然后选择文件2后第二次预览相同图像的副本，然后第三次同一图像的3个副本继续...

Html代码

<form method="post" action=" " class="form" id="form" accept-charset="UTF-8" 
enctype="multipart/form-data" >

<div class="field" align="left"> 
<h3>Upload your images</h3>
<input type="text" placeholder="Event name">
<input type="file" id="1" class="gallery_input" name="files[]" multiple />
</div>

Js代码

   <script type="text/javascript"> 

   var event_id=3;
   var input_id;

  $(document).ready(function ()
 {
 function readURL(input)
 {
    if(input.files && input.files[0])
    {
      var reader=new FileReader();
      reader.onload = (function(e) {
      var file = e.target;
      $("<span class=\"pip\">" +
        "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
        "<br/><span class=\"remove\">Remove image</span>" +
        "</span>").insertAfter("#"+input_id);
      $(".remove").click(function(){
        $(this).parent(".pip").remove();
      }); 
    });
      reader.readAsDataURL(input.files[0]);
    }
 }


 $("body").click(function()
{
  $(".gallery_input").change(function()
    {
      var target_input=$(this).attr('id');
      input_id=target_input;
        readURL(this);
    });
 });
});
 </script>

如果我删除

    $("body").click(function()

排除它的工作。但我需要这个，因为它与动态创建的工作有关输入。
我删除了一些HTML和js代码，如输入字段创建Js代码等。因为我觉得它有用。

Answer 1

使用jQuery.on()（及其快捷方式.click()，.change()等）附加事件处理程序并不像您想象的那样有效。每次以这种方式附加处理程序时，已添加到已连接的任何处理程序。此行为与foo.onclick = fn不同，后者替换以前附加的处理程序。

所以，现在......

每次点击body时，页面上的所有.gallery_input元素都会附加一个更改处理程序。
每次reader.onload触发时，另一个点击处理程序不仅会附加到新内容中的.remove元素，还会添加到之前附加内容中的.remove元素中。

代码可以通过多种方式修复，其中主要是（如上所述@mplungjan）将change和click处理永久委托给form，以及简化readURL()。

$(document).ready(function () {
    function readURL(e) {
        var input = e.target;
        if(input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var file = e.target;
                $("<span class=\"pip\"><img class=\"imageThumb\" src=\"" + file.result + "\" title=\"" + file.name + "\"/><br/><span class=\"remove\">Remove image</span></span>").insertAfter(input); // you already know `input` so it doesn't need to be rediscovered with `'#'+input_id`
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#form")
    .on('change', '.gallery_input', readURL)
    .on('click', '.remove', function() {
        $(this).parent(".pip").remove();
    });
});

$("body").click(...)处理程序似乎没必要，已经消失。

使用动态创建的输入元素预览图像

1 个答案: