jQuery Div 推送通知的通知警报语法

Question

我正在通过推送器将事件推送到以下代码：我没有从 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);
});

Answer 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 中的文字 "message"。但是 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));

（编辑）如果你想添加一个 data.notification_title 到你的 Pusher 事件并显示它，你可以：

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));

jQuery Div 推送通知的通知警报语法

jQuery Div Notification Alert Syntax on Pusher Notification

html

jquery

pusher