在Turbolinks-5返回到访问其他页面的页面后，Javascript代码未重新加载

Question

我正在使用jQuery contextMenu (2.x)。发生的情况是，当页面第一次加载时，上下文菜单可以完美地工作。但是，当我转到其他页面时，Turbolinks会将我带到其他页面。而且，当我返回到上一页时，我应该能够看到上下文菜单(在右键单击时)，但菜单没有显示。

我试过了

我还尝试将代码放在正文中，希望每次都加载代码。但我失败了。此外，我还尝试使用events load和visit；但没有帮助。

代码

// 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);

规格

Rails 4.2 Turbolinks 5

Answer 1

对我来说起作用的是：

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

我正在检查是否仍然有一个打开的上下文菜单，如果有，将其从DOM中删除。现在，如果我使用上下文菜单离开该页面，我就可以从该页面开始。我希望它对你仍然有用。