Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.08.2015, 11:04
Новичок на форуме
Отправить личное сообщение для Genie Посмотреть профиль Найти все сообщения от Genie
 
Регистрация: 12.08.2015
Сообщений: 7

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

});


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

Почему это происходит мне вроде бы понятно, непонятно как от этого избавиться. Прошу помощи.
Ответить с цитированием
  #2 (permalink)  
Старый 12.08.2015, 11:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,122

Genie, ты нормальный/полный тестовый пример в состоянии сделать?
Ответить с цитированием
  #3 (permalink)  
Старый 12.08.2015, 11:22
Новичок на форуме
Отправить личное сообщение для Genie Посмотреть профиль Найти все сообщения от Genie
 
Регистрация: 12.08.2015
Сообщений: 7

В принципе могу попробовать, просто это все в среде шерпоинта работает, через скриптовую веб-часть. Я попробую собрать в отдельный html файл
Ответить с цитированием
  #4 (permalink)  
Старый 12.08.2015, 11:31
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Genie
непонятно как от этого избавиться
Делегируйте обработку событий таблице.
Ответить с цитированием
  #5 (permalink)  
Старый 12.08.2015, 11:36
Новичок на форуме
Отправить личное сообщение для Genie Посмотреть профиль Найти все сообщения от Genie
 
Регистрация: 12.08.2015
Сообщений: 7

Сообщение от laimas Посмотреть сообщение
Делегируйте обработку событий таблице.
Уточните пожалуйста о какой таблице идет речь? Если таблице в которую добавляются элементы, то это я уже сделал. Или той, которая содержит в себе "кнопки"?
Ответить с цитированием
  #6 (permalink)  
Старый 12.08.2015, 11:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Genie
Уточните пожалуйста о какой таблице идет речь?
В которую происходит добавление, или же вот это $("#z_prodTable").on("click", 'span'...
нужно определять не скопом отдельно, а после добавления строки в таблицу, найти элемент и установить на него обработчик.
Ответить с цитированием
  #7 (permalink)  
Старый 12.08.2015, 11:44
Новичок на форуме
Отправить личное сообщение для Genie Посмотреть профиль Найти все сообщения от Genie
 
Регистрация: 12.08.2015
Сообщений: 7

Сообщение от laimas Посмотреть сообщение
Делегируйте обработку событий таблице.
Попробовал делегировать таблице, в которой расположены кнопки, теперь, если кликаем на "кнопку" в последней строке событие срабатывает один раз, предпоследнюю: два раза, первую: три раза соответственно.
Ответить с цитированием
  #8 (permalink)  
Старый 12.08.2015, 11:45
Новичок на форуме
Отправить личное сообщение для Genie Посмотреть профиль Найти все сообщения от Genie
 
Регистрация: 12.08.2015
Сообщений: 7

Сообщение от laimas Посмотреть сообщение
В которую происходит добавление, или же вот это $("#z_prodTable").on("click", 'span'...
нужно определять не скопом отдельно, а после добавления строки в таблицу, найти элемент и установить на него обработчик.
Понял, попробую, спасибо
Ответить с цитированием
  #9 (permalink)  
Старый 12.08.2015, 11:53
Новичок на форуме
Отправить личное сообщение для Genie Посмотреть профиль Найти все сообщения от Genie
 
Регистрация: 12.08.2015
Сообщений: 7

Сообщение от laimas Посмотреть сообщение
после добавления строки в таблицу,
Небольшое уточнение. Вы имеете ввиду добавить эти строчки в функцию, которая реализует добавление строки в таблицу или после ее выполнения?
Ответить с цитированием
  #10 (permalink)  
Старый 12.08.2015, 13:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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


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

Последний раз редактировалось laimas, 12.08.2015 в 14:41.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не видно текста JavaScript скрипта после динамической загрузки? xintrea AJAX и COMET 1 13.07.2015 12:55
CSS3, элемент с translateZ<0 не ловит ивенты RadChand Events/DOM/Window 6 06.09.2014 03:55
Ивенты и z-index Faantoom Events/DOM/Window 2 15.03.2014 00:06
Передача динамической таблицы в Excel j.r.r Общие вопросы Javascript 5 30.06.2013 22:26
GetElementById не хочет работать в динамической форме Игорёk Events/DOM/Window 8 23.06.2009 13:27