добавление & lt; tr & gt; к таблице с помощью jquery + сохранить функцию jquery на добавленных строках
Я получил таблицу, в которую я хочу добавить дополнительные строки при нажатии на селектор в конце строки. Я нашел решение здесь: Строка таблицы jQuery Clone
Чистый клон ряда это совершенный. Но после слов я не могу клонировать клон, нажав на селектор конца клонированного ряда. Я клонирую только тогда, когда щелкаю по селектору строки, который жестко закодирован и не клонирован.
Вот код HTML / PHP:
<table class="table table-bordered table-hover">
<tr>
<th id="col1">Datum / Anzahl</th>
<th id="col2">Text</th>
<th id="col3">Einzelpreis</th>
<th id="col4">Gesamtpreis</th>
</tr>
<!-- Einzelpositionen -->
<tr>
<td align="left" class="editCell">
<span class="input">
<input type="text" value="<?php echo $eventDatum ?>">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</span>
</td>
<td align="left" class="editCell">
<span class="input">
<input type="text" value="<?php echo $eventTxt ?>">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</span>
</td>
<td align="right" class="editCell">
<span class="input">
<input type="text" text-align="right" value="<?php echo $ePreis ?>">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</span> <?=$waehrung ?>
</td>
<td align="right" class="editCell">
<span class="input">
<input type="text" text-align="right" value="<?php echo $gPreis ?>">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</span> <?=$waehrung ?>
</td>
<td class="no-border">
<span class="glyphicon glyphicon-plus" aria-hidden="true">plus</span>
</td>
</tr><!-- Summen und MwSt -->
<tr>
<td align="right" colspan="3">Zwischensumme</td>
<td align="right">
<span class="text"><?php echo $nettoSum ?></span>
<span class="input">
<input type="hidden" text-align="right" value="<?php echo $nettoSum ?>">
</span> <?=$waehrung ?>
</td>
</tr>
<tr>
<td align="right" colspan="3">Mehrwertsteuer 19%</td>
<td align="right">
<span class="text"><?php echo $vat ?></span>
<span class="input">
<input type="hidden" text-align="right" value="<?php echo $vat ?>">
</span> <?=$waehrung ?>
</td>
</tr>
<tr>
<th style="text-align: right !important" colspan="3">Rechnungsbetrag</th>
<th style="text-align: right !important">
<span class="text"><?php echo $bruttoSum ?></span>
<span class="input">
<input type="hidden" text-align="right" value="<?php echo $bruttoSum ?>">
</span> <?=$waehrung ?>
</th>
</tr>
</table>
И вот код jquery:
$('.glyphicon-plus').click(function() {
var $tr = $(this).closest('tr');
var $clone = $tr.clone();
$clone.find(':text').val('');
$clone.find('span.text').after('-kopie');
$tr.after($clone);
});
Надеюсь, моя первая запись на скрипке сработает 😉 http://jsfiddle.net/8v35m2c1/
Надеюсь получить некоторые идеи. Код — это просто часть моих оригинальных файлов 😉
Ура, Крис
Решение
Вам нужно использовать on функция вместо click, чтобы гарантировать, что новые строки также получат обработчик события:
$('table').on('click', '.glyphicon-plus', function() {
var $tr = $(this).closest('tr');
var $clone = $tr.clone();
$clone.find(':text').val('');
$clone.find('span.text').after('-kopie');
$tr.after($clone);
});
Другие решения
Как сказано в JQuery Clone Doc :
withDataAndEvents (по умолчанию: false)
Тип: логическое значение
Логическое значение, указывающее, следует ли копировать обработчики событий вместе с элементами. Начиная с jQuery 1.4, данные элемента также будут скопированы.
Поэтому передача true в качестве аргумента клону будет делать именно то, что вы хотите:
$('.glyphicon-plus').click(function() {
var $tr = $(this).closest('tr');
var $clone = $tr.clone(true);
$clone.find(':text').val('');
$clone.find('span.text').after('-kopie');
$tr.after($clone);
});
Когда вы связываетесь с DOM в jQuery, используя .click он связывает только те элементы, которые существуют в настоящее время.
Для динамического связывания (т.е. применяется к элементам, добавленным после определения связывания), вам необходимо использовать .on,
$( "table" ).on( "click", ".glyphicon-plus", function() {
//...
});