Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Не работает обработчик событий на добавленные элементы (https://javascript.ru/forum/events/47128-ne-rabotaet-obrabotchik-sobytijj-na-dobavlennye-ehlementy.html)

ronron 10.05.2014 03:04

Не работает обработчик событий на добавленные элементы
 
Не срабатывает обработчик событий на добавленные с помощью 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);
});

jsnb 10.05.2014 06:35

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

        var id = this.id;

        menuAction(id);
});

Ну а вообще код какой-то странный. Непонятно нафига эти трюки с удалением элементов? Зачем там бесконечный таймер? Какие-то странные переливания из пустого в порожнее... И нафига всё это надо тоже совершенно не понятно.

ronron 10.05.2014 16:42

Спасибо.

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


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