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

【问题标题】：Javascript code not re-loaded after Turbolinks-5 comes back to the page visiting other pagesTurbolinks-5 返回访问其他页面的页面后未重新加载 Javascript 代码
【发布时间】：2018-11-29 16:15:21
【问题描述】：

我正在使用jQuery contextMenu (2.x)。发生的情况是，当页面首先加载时，上下文菜单完美运行。但是，当我转到其他页面时，Turbolinks 会将我带到其他页面。而且，当我回到上一页时，我应该能够看到上下文菜单（右键单击），但菜单不显示。

我试过了

我也尝试将代码放在正文中，希望代码每次都能加载。但我失败了。我也尝试使用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);

规格

导轨 4.2 涡轮链接 5

【问题讨论】：

你试过turbolinks:render事件吗？

标签： jquery ruby-on-rails-4 contextmenu turbolinks-5

【解决方案1】：

对我有用的是：

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

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

【讨论】：