Javascript code not re-loaded after Turbolinks-5 comes back to the page visiting other pages

Question

I am using jQuery contextMenu (2.x). what happens is, when the page loads first, the context menu works perfectly. But, when I goto to some other page, Turbolinks takes me to other page. And, when I come back to the prev-page when I should be able to see context-menu(on right click), the menu does not show up.

I tried

I have also tried putting the code within the body, expecting the code to load every time. but I failed. Also I tried to use both events load and visit; but no help.

Code

// See this for more info
// https://swisnl.github.io/jQuery-contextMenu/demo/callback.html
window.menuHandler = function () {
    if (document.getElementsByClassName('schedules index').length === 0) {
        return false;
    }
    if ($('.main-container.customer-view').length > 0) {

        $.contextMenu({
            selector: '.dragzones.context-menu-limited',
            items: {
                "autoSchedule": {
                    name: "Auto Schedule", icon: "copy", callback: function (itemKey, opt, e) {
                        ev = {};
                        ev.draggedUserItemIdFromList = $(this).attr('id');
                        ev.target = $(this).parent('td');
                        ev.duplicateCard = true;
                        window.handleCustomTasks(ev);
                    }
                }
            }
        });

        $.contextMenu({
            selector: '.dragzones',
            items: {
                "edit": {
                    name: "Edit", icon: "edit", callback: function (itemKey, opt, e) {
                        $selectedCard = $(this);
                        window.editCardHandler($selectedCard);
                    }
                },
                "delete": {
                    name: "Delete", icon: "delete", callback: function (itemKey, opt, e) {
                        $selectedCard = $(this);
                        window.deleteCardHandler($selectedCard);
                    }
                }
            }
        });
    } else {
        $.contextMenu({
            selector: '.dragzones.context-menu-limited',
            items: {
                "autoSchedule": {
                    name: "Auto Schedule", icon: "copy", callback: function (itemKey, opt, e) {
                        ev = {};
                        ev.draggedUserItemIdFromList = $(this).attr('id');
                        ev.target = $(this).parent('td');
                        ev.duplicateCard = true;
                        window.handleCustomTasks(ev);
                    }
                }
            }
        });
        $.contextMenu({
            selector: '.dragzones',
            items: {
                "edit": {
                    name: "Edit", icon: "edit", callback: function (itemKey, opt, e) {
                        $selectedCard = $(this);
                        window.editCardHandler($selectedCard);
                    }
                },
                "autoSchedule": {
                    name: "Auto Schedule", icon: "copy", callback: function (itemKey, opt, e) {
                        ev = {};
                        ev.draggedUserItemIdFromList = $(this).attr('id');
                        ev.target = $(this).parent('td');
                        ev.duplicateCard = true;
                        window.handleCustomTasks(ev);
                    }
                },
                "delete": {
                    name: "Delete", icon: "delete", callback: function (itemKey, opt, e) {
                        $selectedCard = $(this);
                        window.deleteCardHandler($selectedCard);
                    }
                }
            }
        });
    }
};

document.addEventListener("turbolinks:load", window.menuHandler);
document.addEventListener("turbolinks:visit", window.menuHandler);

Specs

Rails 4.2 Turbolinks 5

Answer 1

What worked for me was the following:

$(document).on('turbolinks:before-cache', function() {
  if($('#context-menu-layer').length) {
    $('#context-menu-layer').remove();
    $('.context-menu-list').remove();
  }
});

I am checking if there is still an open context menu if so remove it from the DOM. Now I have my starting point from that page if I used a context menu to leave that page. I hope it's still useful for you.