Здравствуйте! Попробую описать проблему. У меня есть таблица и кнопка "Добавить строку", которая добавляет новую строку в таблицу. Вот код:
var _htmlP = "<tr style='text-align:center' name='z_prodStr#" + j.toString() + "'>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td class='z-cell'></td>" +
"<td>" +
"<table style='border-collapse:separate;'>" +
"<tr>" +
"<td class='z-button-cell'>" +
"<span name='z_saveProd#" + j.toString() + "' class='z-hm-button'>" +
"<img alt src='/_layouts/15/1049/images/formatmap16x16.png?rev=23' style='position:absolute; top: -199px; left: -289px'>" +
"</span>" +
"</td>" +
"<td class='z-button-cell'>" +
"<span name='z_delProd#" + j.toString() + "' class='z-hm-button'>" +
"<img alt src='/_layouts/15/1049/images/formatmap16x16.png?rev=23' style='position:absolute; top: -182px; left: -289px'>" +
"</span>" +
"</td>" +
"<tr>" +
"</table>" +
"</tr>";
$("#z_prodTable").append(_htmlP);
Последняя ячейка в строке содержит табличку с двумя ячейками, которые выполняют функции кнопок.
На них висит следующий ивент:
$("#z_prodTable").on("click", 'span', function() {
if (~$(this).attr("name").toString().indexOf("z_saveProd#")) {
alert("Редактирование");
} else {
alert("Удаление");
}
});
Проблема в том, что если мы добавляем например три строки, и потом нажмем на любую из "кнопок", то ивент сработает три раза.
Почему это происходит мне вроде бы понятно, непонятно как от этого избавиться. Прошу помощи.