Javascript.RU

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

Не работает обработчик событий на добавленные элементы
Не срабатывает обработчик событий на добавленные с помощью appendTo() элементы из массива. Класс остается прежним "album", но из элементов нетронутым остается только один, который и продолжает работать. Остальные же элементы перестают реагировать на клик:

<div class="menuline">
    <div class="album" id="d"><a href="#">D</a></div>
    <div class="album" id="l"><a href="#">L</a></div>
    <div class="album"  id="p"><a href="#">P</a></div>
    <div class="album"  id="w"><a href="#">W</a></div>
    <div class="album"  id="s"><a href="#">S</a></div>
    <div class="album"  id="c"><a href="#">C</a></div>
        </div>




var albumLink = ["d", "l", "p", "w", "s", "c"];
function menuAction(id) {
        var newAlbum = [];
        var num = $.inArray(id, albumLink);
        for (i=0; i<albumLink.length; i++) {
            if (i !== num) {
                $("#" + albumLink[i]).fadeTo(200, 0);
               newAlbum.push($("#" + albumLink[i]).clone()); // тут добавляем элементы в массив
            }
        }

        for (var i=0; i<num; i++) {
            $("#" + albumLink[i]).addClass("psy");                 // меняем некоторые из элементов
            $("#" + albumLink[i]).removeClass("album");
            $("#" + albumLink[i]).removeAttr("id");
        }

        for (i=num+1; i<albumLink.length; i++) {
            $("#" + albumLink[i]).remove();                        // оставшиеся удаляем
        }

        for (i=0; i<newAlbum.length; i++) {
            newAlbum[i].appendTo(".menuline");                     // тут возвращаем их назад
            $(".album").eq(i+1).fadeOut();

            }
        var t = 1;
        if (t<6) {
            var timer = setInterval(function () {
                $(".album").eq(t).fadeIn()
                t++;
            }, 200);
        }
        else {
            clearInterval(timer);
        }
        }

 $(".album").on("click", function() {

        var id = this.id;

        menuAction(id);
});

Последний раз редактировалось ronron, 10.05.2014 в 02:07.
Ответить с цитированием
  #2 (permalink)  
Старый 10.05.2014, 05:35
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Ну так а с чего им реагировать, если они клоны, а те элементы на которые были повешены обработчики удалены. Можно, конечно, клонировать вместе с обработчиками, но лучше сделать через делегирование:
$(".menuline").on("click", ".album", function() {

        var id = this.id;

        menuAction(id);
});

Ну а вообще код какой-то странный. Непонятно нафига эти трюки с удалением элементов? Зачем там бесконечный таймер? Какие-то странные переливания из пустого в порожнее... И нафига всё это надо тоже совершенно не понятно.
Ответить с цитированием
  #3 (permalink)  
Старый 10.05.2014, 15:42
Новичок на форуме
Отправить личное сообщение для ronron Посмотреть профиль Найти все сообщения от ronron
 
Регистрация: 10.05.2014
Сообщений: 2

Спасибо.

Код просто вырезан из контекста, возможно нужно было его отформатировать.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает код внутри циклов DZHETIGAPA Events/DOM/Window 1 21.06.2011 00:03
Как "обмануть" обработчик события? itPiligrim Events/DOM/Window 0 13.05.2010 21:55
Как работает обработчик onMouseMove() bayah Общие вопросы Javascript 3 29.04.2010 13:36
Динамическая HTML форма (FireFox - работает, IE - не работает) dm1tr1y Общие вопросы Javascript 10 11.12.2009 14:59
Скрипт меню-гармошки работает выборочно Extern Элементы интерфейса 2 23.02.2009 14:32