Clone input on element click

Question

I have an image upload preview. And, when user click in .thumb , I want to clone the input text name and show this. But clone() isn't working.

thanks

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

what about this..

im still confused about what you want to do.. but the click event wasnt working due to the image not being there when the dom was ready, after the fact

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

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

append() is faster than appendTo()

basically using on() will keep the event listening for the .thumb and then attach the event on it

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

Answer 2

I think this will do what you want to do. I don't know what you were doing with the .click, but I moved the HTML to your loop that generates the thumbs.

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