通知代码不起作用

Notification code not working

本文关键字：不起作用 代码 通知      更新时间：2023-09-26

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

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

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>

application.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.scs

/*----- 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;
}

您正在使用Turbolinks宝石吗？它中断了一些现有的事件，如$（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在这个小提琴里工作得很好。我只能假设您link_to当前通知页面和文档就绪从未被调用。

相关文章：