Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Ивенты в динамической структуре (https://javascript.ru/forum/events/57622-iventy-v-dinamicheskojj-strukture.html)

Genie 12.08.2015 11:04

Ивенты в динамической структуре
 
Здравствуйте! Попробую описать проблему. У меня есть таблица и кнопка "Добавить строку", которая добавляет новую строку в таблицу. Вот код:
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("Удаление");
	}

});


Проблема в том, что если мы добавляем например три строки, и потом нажмем на любую из "кнопок", то ивент сработает три раза.

Почему это происходит мне вроде бы понятно, непонятно как от этого избавиться. Прошу помощи.

ksa 12.08.2015 11:13

Genie, ты нормальный/полный тестовый пример в состоянии сделать?

Genie 12.08.2015 11:22

В принципе могу попробовать, просто это все в среде шерпоинта работает, через скриптовую веб-часть. Я попробую собрать в отдельный html файл

laimas 12.08.2015 11:31

Цитата:

Сообщение от Genie
непонятно как от этого избавиться

Делегируйте обработку событий таблице.

Genie 12.08.2015 11:36

Цитата:

Сообщение от laimas (Сообщение 383811)
Делегируйте обработку событий таблице.

Уточните пожалуйста о какой таблице идет речь? Если таблице в которую добавляются элементы, то это я уже сделал. Или той, которая содержит в себе "кнопки"?

laimas 12.08.2015 11:44

Цитата:

Сообщение от Genie
Уточните пожалуйста о какой таблице идет речь?

В которую происходит добавление, или же вот это $("#z_prodTable").on("click", 'span'...
нужно определять не скопом отдельно, а после добавления строки в таблицу, найти элемент и установить на него обработчик.

Genie 12.08.2015 11:44

Цитата:

Сообщение от laimas (Сообщение 383811)
Делегируйте обработку событий таблице.

Попробовал делегировать таблице, в которой расположены кнопки, теперь, если кликаем на "кнопку" в последней строке событие срабатывает один раз, предпоследнюю: два раза, первую: три раза соответственно.

Genie 12.08.2015 11:45

Цитата:

Сообщение от laimas (Сообщение 383816)
В которую происходит добавление, или же вот это $("#z_prodTable").on("click", 'span'...
нужно определять не скопом отдельно, а после добавления строки в таблицу, найти элемент и установить на него обработчик.

Понял, попробую, спасибо

Genie 12.08.2015 11:53

Цитата:

Сообщение от laimas (Сообщение 383816)
после добавления строки в таблицу,

Небольшое уточнение. Вы имеете ввиду добавить эти строчки в функцию, которая реализует добавление строки в таблицу или после ее выполнения?

laimas 12.08.2015 13:08

$("#z_prodTable") - я так понимаю, что это таблица в которую добавляются строки, так? Значит надо при добавлении:

$(_htmlP).appendTo("#z_prodTable").find('span').click(....)


Или же лучше, родительской таблице в которую вставляются эти строки вместе с вложенной таблицей, в которой и есть этот span делегировать единожды обработку щелчка по ним.


Часовой пояс GMT +3, время: 08:19.