Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Привязка событий к динамически созданным элементам (https://javascript.ru/forum/misc/17126-privyazka-sobytijj-k-dinamicheski-sozdannym-ehlementam.html)

htaccess 06.05.2011 19:24

Привязка событий к динамически созданным элементам
 
Доброго времени суток! Имеется страничка со скриптом :
http://t.pwon.pp.ua/laSearch/window/w1.html
Пишу свои подвижные "окошки", и одно по центру двигается как нужно, а работает так :
Прижимаем ЛКМ(onclick) на кнопке "#" и перемещаем курсор в нужное место, за ним будет двигаться и слой, после того, как клавиша будет отпущена, произойдёт событие onmousedown и слой встанет на месте.
Всё бы ничего, но пытаюсь динамически через цикл добавить слои с подобным содержанием (кнопками и событиями), но всё безуспешно, слои то не цепляются, то бегают и не отцепляются от мышки.

Жду вашей помощи, и прошу оградить от высказываний типа "drag&drop в помощь, не страдай ерундою" и т.д., искал решение долго, не нашёл (google/yandex/javascript.ru - поиск), но увы, либо я такой тупой, что не понял, и нуждаюсь в помощи людей умнейших, либо не там ищу, в общем, прошу вашей помощи.

melky 10.05.2011 15:22

при создания окошка надо было добавлять обработчик

htaccess 10.05.2011 15:54

Цитата:

Сообщение от melky (Сообщение 104038)
при создания окошка надо было добавлять обработчик

Весь смысл в том, что не добавляется, либо я не правильно это делаю, подскажите код добавления.
Я делаю это так :
function addWin() {
	for (var i=1;i<4;i++) {
		var eleOne 	= document.createElement('div');
		nameD	= 'div'+i;
		eleOne.id	= nameD;
		eleOne.style.backgroundColor	= '#CCF';
		eleOne.style.width	= '300px';
		eleOne.style.height	= '200px';
		eleOne.style.left	= '0'+i*2+'px';
		eleOne.style.top	= '0'+i*2+'px';
		eleOne.style.position			= 'absolute';
		eleOne.style.zIndex	= '4'+i;
		document.body.appendChild(eleOne);
		//
		eleTwo	= document.createElement('input');
		nameG		= 'inp'+i;
		eleTwo.id	= nameG;
		eleTwo.className	= 'rDnD';
		eleTwo.type	= 'button';
		eleTwo.value= '#';
		eleTwo.addEventListener('click', function () {
		move_am('lol', nameD);
		}, false);
		eleTwo.addEventListener('mousedown', function () {
		move_am('ask', nameD);
		}, false);
		eleOne.appendChild(eleTwo);
		eleOne	= null;
		eleTwo	= null;
	}
}


И увы, не работает

melky 10.05.2011 17:37

там все хорошо

созданные через кнопку окошки перетаскиваются

перемещение инициализаруется при клике, а это кончается после зажатия мышки на элементе

т.е. я хочу сказать,ваш код рабочий, синтаксических ошибок нет

ошибка тут, насчет ивента. это строки 21-26. подчеркнутое

замените click на mousedown, а нижний mousedown на mouseup
eleTwo.addEventListener(*!*'click'*/!*, function () {
		move_am('lol', nameD);
		}, false);

		eleTwo.addEventListener(*!*'mousedown'*/!*, function () {
		move_am('ask', nameD);
		}, false);

htaccess 10.05.2011 22:13

Спасибо, а у меня не двигаются остальные, кроме серого и самого последнего созданного в циклу, который ближе. При попытке перетащить любой другой слой, тащится самый последний, который был создан в цикле к курсору мыши( И firebug говорит, что изменение отступов происходит у самого последнего слоя, хотя кликаю на самом первом.
http://t.pwon.pp.ua/laSearch/window/w1.html

htaccess 10.05.2011 22:36

Всё заработало, когда изменил на this.parentNode.id
Решил, чтобы кнопка отправляла ай ди своего родителя, а не заранее написанный его же ай ди.
Спасибо большое, что ответили и помогли, но, думаю скоро опять появятся вопросы) Ещё раз спасибо!
eleTwo.addEventListener('mousedown', function () {
		move_am('go', this.parentNode.id);
		}, false);
		eleTwo.addEventListener('mouseup', function () {
		move_am('ask', this.parentNode.id);


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