Привязка событий к динамически созданным элементам
Доброго времени суток! Имеется страничка со скриптом :
http://t.pwon.pp.ua/laSearch/window/w1.html Пишу свои подвижные "окошки", и одно по центру двигается как нужно, а работает так : Прижимаем ЛКМ(onclick) на кнопке "#" и перемещаем курсор в нужное место, за ним будет двигаться и слой, после того, как клавиша будет отпущена, произойдёт событие onmousedown и слой встанет на месте. Всё бы ничего, но пытаюсь динамически через цикл добавить слои с подобным содержанием (кнопками и событиями), но всё безуспешно, слои то не цепляются, то бегают и не отцепляются от мышки. Жду вашей помощи, и прошу оградить от высказываний типа "drag&drop в помощь, не страдай ерундою" и т.д., искал решение долго, не нашёл (google/yandex/javascript.ru - поиск), но увы, либо я такой тупой, что не понял, и нуждаюсь в помощи людей умнейших, либо не там ищу, в общем, прошу вашей помощи. |
при создания окошка надо было добавлять обработчик
|
Цитата:
Я делаю это так :
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;
}
}
И увы, не работает |
там все хорошо
созданные через кнопку окошки перетаскиваются перемещение инициализаруется при клике, а это кончается после зажатия мышки на элементе т.е. я хочу сказать,ваш код рабочий, синтаксических ошибок нет ошибка тут, насчет ивента. это строки 21-26. подчеркнутое замените click на mousedown, а нижний mousedown на mouseup
eleTwo.addEventListener(*!*'click'*/!*, function () {
move_am('lol', nameD);
}, false);
eleTwo.addEventListener(*!*'mousedown'*/!*, function () {
move_am('ask', nameD);
}, false);
|
Спасибо, а у меня не двигаются остальные, кроме серого и самого последнего созданного в циклу, который ближе. При попытке перетащить любой другой слой, тащится самый последний, который был создан в цикле к курсору мыши( И firebug говорит, что изменение отступов происходит у самого последнего слоя, хотя кликаю на самом первом.
http://t.pwon.pp.ua/laSearch/window/w1.html |
Всё заработало, когда изменил на 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, время: 23:53. |