js代码在导航路线后停止工作而无需重新启动页面

Posted 2023-02-23

【中文标题】js代码在导航路线后停止工作而无需重新启动页面

【英文标题】：js the code stops working after navigating the routes without rebooting the page

【发布时间】：2018-03-10 03:02:28

【问题描述】：

我有负责选择的 js 代码。该站点无需重新加载页面即可运行（使用nuxt）。问题是如果我切换路线，那么这个选择不起作用。我该如何解决这个问题？

$(function () 
        $('.select_list_radio').on('click', function()
            var current = $(this).find('label span').text();
            $(this).parents('.select_list_wrapper').find('.select_list_current .select_list_current_item').text(current);
            $(this).parents('.select_list_wrapper').removeClass('open');
            $(this).parents('.select_list_wrapper').find('.select_list').css('display', 'block');
        );
    )

【问题讨论】：

当.select_list_radio 元素不存在于DOM 中时，你是否调用了这个？

@thanksd 不，第一次加载页面时，选择有效。然后，当我走上路线时，它停止工作。如果您重新加载页面，它将再次开始工作

【参考方案1】：

您绝不能对 Vuejs 管理的元素进行更改，因为 Vue 不会意识到更改，并且会继续并在下一个更新周期中覆盖它。

因此，您可以尝试将 .select_list_radio 包装到一个新组件中，或者更好的是，尝试在 Vue 中思考，然后将 jQuery 放在一边。

您可以在此链接中阅读如何安全地将 jQuery 与 Vuejs 一起使用：https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/