JQuery клонирование, вставка и манипуляция вставленными элементами

Question

Я клонирую таблицу содержит 2 кнопки. Одна кнопка клонирует и вставляет новую строку таблицы, а другая кнопка клонирует всю таблицу и вставляет ее после последней таблицы.

Когда таблица была клонирована и вставлена ​​внизу, я нажимаю кнопку «Добавить», чтобы добавить новую строку, строка вставляется только в верхнюю таблицу.

Как вставить новую строку в соответствующую таблицу, если у меня есть 5 таблиц?

Мой HTML:

<table class="myTable"> 
<tr class="firstRow"> 
    <td> 
     Name: <input type="text" size="30" /> 
    </td> 
    <td> 
     Email: <input type="text" size="30" /> 
    </td> 
</tr> 
<tr> 
    <td colspan="2" align="right"> 
     <input type="button" value="Add" class="addRow" /> 
    </td> 
</tr> 
</table> 

<p><input type="button" value="Copy" class="addTable" /></p> 

JQuery:

$('.addRow').click(function(){ 
    var cloned = $('.firstRow').clone(true); 
    cloned.insertAfter($('table.myTable tr').eq(-2)).removeClass('firstRow'); 
}); 


$('.addTable').click(function(){ 
    var cloned = $('.myTable').clone(true); 
    cloned.insertAfter($('.myTable:last')).before('<hr />').removeClass('myTable'); 
}); 

Мой Fiddle: http://jsfiddle.net/jonxblaze/S3N77/

Answer 1

Ваша реализация для .addRow кнопки не хорошо.

Пожалуйста, попробуйте это:

$('.addRow').click(function(){ 
    var cloned = $(this).parents('table').find('tr:eq(0)').clone(true); 
    cloned.insertBefore($(this).parents('table').find('tr:last-child')); 
}); 

выше реализация не нуждается в .firstRow класс. Также он вставляет клонированную строку только в таблицу, которая является родительской кнопкой нажатой кнопки.

Answer 2

Это потому, что второй клонировали таблица не существует ш если вы связываете событие щелчка строки клонирования. Для этого вам нужно использовать функцию jQuery .on().

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

В основном, когда вы используете .click() он связывает эту функцию ко всем элементам можно найти соответствующий переключатель, который в документе готовы, только одна таблица. .on() работает со всеми элементами, идущими вперед во времени, а не только теми, которые существуют во время запуска сценария.

Если вы действительно хотите использовать .click() вместо .on(), повторно привяжите клики после того, как вы сделали вторую таблицу.

Вот пост меня имеющий simalar вопрос: Using jQuery .on() to make a drop-down menu