推送通知上的 jQuery Div 通知警报语法答案

【问题标题】：jQuery Div Notification Alert Syntax on Pusher Notification推送通知上的 jQuery Div 通知警报语法
【发布时间】：2017-07-04 09:21:31
【问题描述】：

我通过推送器将事件推送到以下代码：我没有从 alertDivNotification 获得预期的 html。

<!-- output -->
<div class="alert alert-danger alert-server" role="alert">Hello</div>

<!-- expected -->
<div class="alert alert-danger alert-server" role="alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Moving Servers</strong> Hello
</div>

var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
  var alertDivNotification = $('<div class="alert alert-danger alert-server" role="alert"><button type="button" class="close" data-dismiss="alert">×</button><strong>Moving Servers</strong> message</div>');
  alertDivNotification.html(data.message);
  $('#alertDivContainer').prepend(alertDivNotification);
});

【问题讨论】：

会发生什么？您是否在事件处理程序中收到 Pusher 事件？您可以通过在var alertDivNotification = ... 上方添加一个日志行来检查。您也可以添加 pusher.logToConsole = true; 并向我们展示您的日志。
我还认为您的 .html(...) 将删除您的 div 中的 <button> 和 <strong>。这可能不是你想要的。
@jameshfisher 是的，推送事件被正确触发，html div 缺少元素。

标签： jquery html pusher

【解决方案1】：

问题在于：

var alertDivNotification = $('<div class="alert alert-danger alert-server" role="alert"><button type="button" class="close" data-dismiss="alert">×</button><strong>Moving Servers</strong> message</div>');
alertDivNotification.html(data.message);

我假设您希望 Pusher 事件中的 data.message 替换 HTML 中的文字“消息”。但是 jQuery .html 方法正在替换您的 <div> 的所有子项，包括您的按钮。相反，使用.append，附加一个由data.message 构造的文本节点。像这样：

var alertDivNotification = $('<div class="alert alert-danger alert-server" role="alert"><button type="button" class="close" data-dismiss="alert">×</button><strong>Moving Servers</strong></div>');
alertDivNotification.append(document.createTextNode(data.message));

（编辑）如果您想在 Pusher 事件中添加 data.notification_title 并显示它，您可以：

var alertDivNotification = $('<div class="alert alert-danger alert-server" role="alert"><button type="button" class="close" data-dismiss="alert">×</button></div>');
alertDivNotification.append($('<strong></strong>').append(document.createTextNode(data.notification_title)));
alertDivNotification.append(document.createTextNode(data.message));

【讨论】：

如何在 {{data.notification_title}} 之间添加 (data.notification_title)？
@dflow 我已经用一个建议（未经测试）编辑了我的答案。希望对您有所帮助！