文章/答案/技术大牛

发布

社区首页 >问答首页 >以下链接后未添加Javascript事件侦听器

问以下链接后未添加Javascript事件侦听器
EN

Stack Overflow用户

提问于 2021-02-11 03:48:29

回答 1查看 30关注 0票数 0

我正在使用一个按钮来控制一个可折叠的侧边栏菜单。在初始加载时，该按钮工作正常。在跟踪链接并检查元素之后，我可以告诉您事件侦听器没有被添加，并且按钮停止工作，直到我刷新页面。我是rails的新手，所以我不确定为什么会出现这种情况。任何帮助都是非常感谢的！

HTML：

<html>
  <head>
    <title>BugSmacker</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  </head>

  <body>
    <div id="page-container">
      <div id="content-wrap">
        <div class="bg-dark py-3">
          <h1 class="nav-title pl-2"> <span class="bug-title" >Bug</span> Smacker</h1>
        </div>
        <div class="py-3 second-nav">
          <button id="navbtn" class="btn nav-btn btn-lg fs-2">&#9776;</button>
        </div>
        <div id="mySidebar" class="sidebar" data-open="false">
          <%= link_to 'Home', root_path %>
          <%= link_to 'Sign In', new_user_session_path %>
          <%= link_to 'Sign Up', new_user_registration_path %>
        </div>
        <div id="main" class="px-0 py-0">
          <%= yield %>
        </div>
      </div>
      <footer id="footer" class="bg-dark pt-3">
        <a href="#" class="footer-link mx-2">Home</a>
        <a href="#" class="footer-link mx-2">About</a>
        <a href="#" class="footer-link mx-2">Contact</a>
      </footer>
    </div>
  </body>
</html>

Javascript：

import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";
import "channels";

Rails.start();
Turbolinks.start();
ActiveStorage.start();
require("jquery");

document.addEventListener("DOMContentLoaded", () => {
  function openNav() {
    const sidebar = document.getElementById("mySidebar");
    sidebar.dataset.open = "true";
    sidebar.style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
  }

  function closeNav() {
    const sidebar = document.getElementById("mySidebar");
    sidebar.dataset.open = "false";
    sidebar.style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
  }

  function toggleNav() {
    const sidebar = document.getElementById("mySidebar");
    const isOpen = sidebar.dataset.open;
    if (isOpen === "true") {
      closeNav();
    } else {
      openNav();
    }
  }

  var openBtn = document.getElementById("navbtn");
  openBtn.addEventListener("click", toggleNav, false);
});

html

ruby-on-rails

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-11 04:07:51

进行下面的更改。

# old
document.addEventListener("DOMContentLoaded", () => {

# new
document.addEventListener("turbolinks:load", () => {

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66143988

复制

相似问题

问以下链接后未添加Javascript事件侦听器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以下链接后未添加Javascript事件侦听器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以下链接后未添加Javascript事件侦听器
EN