Как добавить повторяющийся элемент jquery?

Question

HTML:

<input type="file" name="data[Tolet][images][]" class="span12 tolet_img" id="file" style="width:100%;"/> 

Я хочу добавить дублированный элемент по щелчку класса 'tolet_img'.

Я попытался следующим образом:

$(document).ready(function(){ 
    $('.tolet_img').click(function(){ 
     var htmlString = $(this).clone(); 
     $(this).after(htmlString); 
    });  
}); 

Я ожидаю, что после того, как один клик HTML будет:

<input type="file" name="data[Tolet][images][]" class="span12 tolet_img" id="file" style="width:100%;"/> 
<input type="file" name="data[Tolet][images][]" class="span12 tolet_img" id="file" style="width:100%;"/> 

Но это не работает. Любая помощь будет оценена.

Answer 1

Вы должны использовать это:

var htmlString = $(this).clone(true); 

Параметр true означает, что события, прикрепленные к элементу также будут скопированы. Кроме того, клонированные входы не будут выполнять шаги, определенные событием (по умолчанию оно не установлено).

Here is the JSFiddle demo

Answer 2

Он работает, как ожидалось, но я предлагаю связывать событие, как этот

$(document).on('click', '.tolet_img', function() { var htmlString = $(this).clone(); $(this).after(htmlString); });

так скопированной file upload может стрелять событие также

здесь вы working snippet