Привязка событий к динамически созданным элементам
Доброго времени суток! Имеется страничка со скриптом :
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, время: 21:18. |