Почему неправильно определяется элемент $(this)?

Question

[Dvorak]

function drawFunctions() { //создание всплывающего меню
    
    $('.parent').on('contextmenu', function(e) {
        $('.functions-menu').detach();
        var top=e.pageY-$('#listFile').offset().top,
            left=e.pageX-$(this).offset().left + 10,
            element=$(this);
            

        $(this).append('<ul class="functions-menu"><li class="functions-menu-buttons">Копировать</li><li class="functions-menu-buttons">Вырезать</li><li class="functions-menu-buttons" id="delete">Удалить</li><li class="functions-menu-buttons" id="rename">Переименовать</li></ul>');
        $('.functions-menu').css({
            'position': 'absolute',
            'top': top,
            'left': left
        });
        
        $(document).on('click', function() {
            $('.functions-menu').detach();
        })
        
        
        console.log('click');
        deleteFile(element);
        
    return false;
    });
};

function deleteFile(element) {
    $(document).on('click', 'li#delete', function() { //удаление файла
        element.detach(); 
    });
}

Имеется несколько дивов с классом "parent". При нажатии правой кнопкой мыши на один из них всплывает меню с функциями "копировать, вставить, удалить и пр.". При нажатии на "удалить" нужный див должен удалиться. И он удаляется.

Но если я три раза подряд нажимаю на каждый див мышкой и только при последнем нажатии выбираю "удалить", то удаляются все три элемента. А должен только последний. В чём проблема?

Answer 1

[Алексей Зуев]

Потому что браузер злопамятный.
Он запоминает всё, что вы на него понавешали)

https://jsfiddle.net/ru9q68kr/

Comments

[Dvorak]

спасибо большое! Всю голову сломал, пока думал