Почему не срабатывает обработчик события?

Question

[Dvorak]

$('.parent').on('contextmenu', function(e) { //отрисовывается окно

        var top=e.pageY,
            left=e.pageX;

      
            $('body').after('<ul class="functions-menu"><li class="functions-menu-buttons">Скачать</li><li class="functions-menu-buttons">Удалить</li><li class="functions-menu-buttons">Переименовать</li></ul>');
            $('.functions-menu').css({
                'top': top,
                'left': left
            });
        
    return false;
    });

    $('li').on('click', function() { //при нажатии на один из пунктов меню скрывается
    console.log(1);
    });

Почему-то при нажатии на <li class="functions-menu-buttons"> ничего не происходит. В чём может быть ошибка?

Answer 1

[DevMan]

https://jsfiddle.net/cLr8uumm/

Comments

[Михаил Горячкин]

Ну решение конечно, но вы бы тогда хотя бы off вешали при клике $('li').off("click"). А то сколько раз катан меню вызовет столько и обработчиков на элемент повесится.

[DevMan]

Михаил Горячкин: это не решение, а указание направления куда думать.

[Михаил Горячкин]

Соглашусь, тут вы правы)

Answer 2

[Михаил Горячкин]

Так как вы добавляете элементы в DOM динамически то вам надо биндить событие как-то так:

$(document).on("click", "li.functions-menu-buttons", function () {
    console.log(this);
});