通知代码不起作用

Question

我不确定为什么我的简单 JavaScript 代码不起作用。控制台中也没有出现任何错误。任何帮助将不胜感激。

当我点击 id #notificationLink 时，id #notificationContainer 不会出现（我最初在我的 css 中将它作为 display:none 在 #notificationContainer 下）

application.html.erb

<ul class="nav_content">
 <li class="notification_li">
  <span id="notification_count">1</span>
  <%= link_to '', '#', id: "notificationLink", class: "fa fa-bell" %>
  <div id="notificationContainer">
   <div id="notificationTitle">Notifications</div>
   <div id="notificationsBody" class="notifications">I am the general notification</div>
   <div id="notificationFooter"><a href="#">See All</a></div>
  </div>
</li>
</ul>

应用程序.js

$(document).ready(function() {
  $("#notificationLink").click(function() {
    $("#notificationContainer").fadeToggle(300);
    $("#notification_count").fadeOut("slow");
    return false;
  });
  //Document Click hiding the popup 
  $(document).click(function() {
    $("#notificationContainer").hide();
  });
  //Popup on click
  $("#notificationContainer").click(function() {
    return false;
  });
});

navigatin.css.scss

/*----- notification: general_notification -----*/
#notification_count {
  font-family: 'Lato', sans-serif;
  padding: 0px 5px 0px 4px;
  background: #b14525;
  color: #ffffff;
  font-weight: 500;
  border-radius: 4px;
  position: absolute;
  margin-top: 6px;
  margin-left: 9px;
  font-size: 11px;
}

#notificationLink:hover {
  background-color: transparent;
}

#notificationContainer {
  background-color: #fff;
  border: 1px solid rgba(100, 100, 100, .4);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  overflow: visible;
  position: absolute;
  top: 50px;
  margin-left: -190px;
  width: 400px;
  z-index: 1;
  display: none; /*info: Enable this after jquery implementation*/ 
}

#notificationContainer:before { /*info: Popup Arrow*/
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  color: transparent;
  border: 10px solid black;
  border-color: transparent transparent white;
  margin-top: -20px;
  margin-left: 188px;
}

#notificationTitle {
  font-weight: bold;
  padding: 8px;
  font-size: 13px;
  background-color: #ffffff;
  position: fixed;
  z-index: 1000;
  width: 384px;
  border-bottom: 1px solid #dddddd;
}

#notificationsBody {
  padding: 33px 0px 0px 0px !important;
  min-height: 300px;
}

#notificationFooter {
  background-color: #e9eaed;
  text-align: center;
  font-weight: bold;
  padding: 8px;
  font-size: 12px;
  border-top: 1px solid #dddddd;
}

Answer 1

您在使用 Turbolinks gem 吗？它会破坏一些现有的事件，例如 $(document).ready()，因为页面永远不会重新加载。

你试过了吗

var loaded = function() {
    $("#notificationLink").click(function() {
        $("#notificationContainer").fadeToggle(300);
        $("#notification_count").fadeOut("slow");
        return false;
    });

    //Document Click hiding the popup 
    $(document).click(function() {
        $("#notificationContainer").hide();
    });

    //Popup on click
    $("#notificationContainer").click(function() {
        return false;
    });
};

$(document).ready(loaded);  // Normal non turbolink page load
$(document).on('page:load', loaded);    //  turbolink page load

我这么说是因为您的 javascript 在this fiddle 中运行良好。我只能假设您 link_to 当前的通知页面和文档准备就绪永远不会被调用。