单击元素时克隆输入

Question

我有图像上传预览。 而且，当用户单击.thumb ，我想克隆输入的文本名称并显示它。 但是clone()无法正常工作。

谢谢

JSFIDDLE

的HTML

<input type="file" id="files" name="files[]" multiple /><br />
<output id="list"></output><br />
<p>Name:<input type="text" class="name"/><p>
<br />

JS

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;

  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
      document.getElementById('list').insertBefore(span, null);
    };
  })(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);
}
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

$('.thumb').click(function() {
$('p').clone();
});

Answer 1

那这个呢..

我仍然对您要执行的操作感到困惑。。但是，由于dom准备就绪后，图像不存在，因此单击事件无法正常工作。

http://jsfiddle.net/emTAX/25/

$('body').on("click",".thumb",function() {
     var myclone = $("p input").clone();
    $('p:first').append(myclone);
});

append（）比appendTo（）更快

基本上使用on（）将使事件监听.thumb，然后将事件附加到该事件上

http://api.jquery.com/on/

Answer 2

我想这会做您想做的。 我不知道您对.click的处理方式，但是我将HTML移到了生成大拇指的循环中。

小提琴： http : //jsfiddle.net/howderek/emTAX/17/

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
        $('.name').clone().appendTo(".name");
        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;

        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ('<img class="thumb" src="' + e.target.result + '" title="' + escape(theFile.name) + '"/><p>Name:<input type="text" class="name" /></p>');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);