Question

我有图片上传预览。并且，当用户单击.thumb时，我想克隆输入文本名称并显示此信息。但clone()无效。

感谢

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);

单击元素时克隆输入

2 个答案:

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