【发布时间】：2020-04-11 04:01:32
【问题描述】：
我正在使用引导弹出窗口构建一个通知弹出窗口。弹出框为每个通知都有一个 div，每个通知都有相同的类（除了文本内容之外相同）。
<% notifs.each do |notif| %>
<div class="media n-media notif-popup-container notif-display" data-id=<%= notif.id %> >
Content
</div>
<% end %>结果如下：
但是，当我单击任何通知 div（在图片中）时，我的单击侦听器的 $(this) 将始终引用第一个 div。我知道这一点，因为当我打印 ID 时，即使单击第三个通知 div 也会打印第一个通知 div 的 ID。
在其他地方找不到类似的问题。这是相关的jquery代码。我使用 $(body).on("click") 而不是 $(".className").click 因为后者不会附加到所需的 div，因为 div 有 display:none 直到它弹出。
$('body').on("click", ".popover-body .notif-popup-container", function() {
console.log("notif popup container clicked");
// prints <div class="media n-media notif-popup-container notif-display"></div>
console.log($(this)[0]);
// prints {}
console.log($(this).data());
// prints first element's id
console.log($('.notif-popup-container').data("id"));
// prints undefined
console.log($(this).data("id"));
})这是弹出框代码。我注意到 data-id 属性没有显示在 Chrome 开发工具中，仅适用于我的 style="display:none" div。这些 div 被插入到弹出框标题和内容的选项中，因此它们必须被隐藏。
$(document).ready(function(){
$("#notificationsBell").popover({
'title' : $('.notifications-title-header').html(), // display:none for html div
'html' : true,
'placement' : 'left',
'content' : $(".notifications-list").html() // display:none for this as well
});
});JS 可能会给出一些提示。使用 Rails 构建，但这似乎无关紧要。任何见解都值得赞赏。
编辑：它没有得到第一个 div，它得到了正确的。它只是没有保留 data-id 属性。所以现在我将把它存储在“id”属性中，该属性将显示在 chrome 开发工具上。我仍然想知道为什么 data-id 不显示，而 id 属性显示。
编辑2：这里是相关的html代码：
<%= link_to "javascript:void(0);", class: "dropdown-toggle", id: "notificationsBell" do %>
<i class="fa fa-bell dropdown-toggle" aria-hidden="true"></i>
<span id="notifUnreadCount">
<%= Notification.unread_count(current_user) %>
</span>
<% end %>
<div style="display:none" class="notifications-title-header" data-id="sup">
<p class="notifications-title">
Notifications
<span class="see-all-notifs"><u><%= link_to "See all", notifications_path %></u></span>
</p>
</div>
<div style="display:none" class="notifications-list">
<% unread_notifications = Notification.unread_count(current_user) %>
<% if unread_notifications === 0 %>
No notifications to display! You are up to date.
<% else %>
<% notifs = current_user.notifications.where(read_at: nil).order("created_at DESC") %>
<% notifs.each do |notif| %>
<div class="media n-media notif-popup-container notif-display" id=<%= notif.id %> >
<%= image_tag "bell.svg", class: "notification-icon-small mr-3" %>
<div class="media-body noti-info">
<b><p><%= notif.notify_type %></p></b>
<span class="n-date trans-timestamp dateTime" data-momentiz="(<%= notif.momentize %>)"></span>
<p><%= notif.message %></p>
</div>
<div class="actions">
<% if notif.status == 'pending' && notif.target.present? %>
<%= link_to update_request_wager_path(notif.target.try(:wager), member_id: notif.target_id, type: "accept", notif_id: notif.id), method: :put, class: "btn table-link acceptBtn red-btn-small", data: { confirm: 'Are you sure you want to accept?' } do %>
<i class="fa fa-check" aria-hidden="true"></i>
<% end %>
<%= link_to update_request_wager_path(notif.target.wager, member_id: notif.target_id, type: "reject", notif_id: notif.id), method: :put,class: "btn table-link rejectBtn red-btn-small", data: { confirm: 'Are you sure you want to reject?' } do %>
<i class="fa fa-times" aria-hidden="true"></i>
<% end %>
<% end %>
<%= link_to get_notification_url(notif) + "#" + notif.notify_type.downcase + "Notif", class: "btn red-btn-small" do %>
<i class="fa fa-eye" aria-hidden="true"></i>
<% end %>
</div>
</div>
<% end %>
<% end %>
</div>【问题讨论】：
-
您的代码似乎按预期工作，您可以提供由 rails 构建的 html 吗？
标签： javascript jquery html twitter-bootstrap bootstrap-4