警报关闭按钮未显示

Question

我动态地更改警报消息：

<div id="alert" hidden="hidden">
 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
</div>

$('#alert').addClass("alert alert-danger alert-dismissable")
    .text('Fail to get upload information from YouTube.')
    .show();

但是没有显示“解散”按钮。

Answer 1

随着.text()方法的执行，您将最终更改div#alert的整个内容。但是，根据您的问题，您似乎只想将文本附加到div中，以保持div内按钮的完整性。

这可以通过.append()方法来实现。

这应该是可行的：

$('#alert').addClass("alert alert-danger alert-dismissable")
.append('Fail to get upload information from YouTube.')
.show();

当您要求替换现有文本时，我建议如下: 1)将前面的文本放置在一个span中，您以后可以引用该span；2)取消隐藏div#alert，同时用一条新消息更改子span的文本，将所有其他内容都保存在div中。

如果你有这样的html：

<div id="alert" hidden="hidden">
 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">Hello</button>
 <span id="message">Text before script execution</span>
</div>

然后，以下脚本将运行良好：

$('#alert').addClass("alert alert-danger alert-dismissable")
    .show()
    .children('#message').text("Text after script execution");

PS:稍后，如果您希望在span中添加html内容，那么.html()将为您工作，而.text()只将内容作为文本处理，而不是将其呈现为html代码。

Answer 2

使用.append而不是.text：这里的工作演示

$('#alert').removeClass('alert alert-info alert-dismissable').addClass("alert alert-danger alert-dismissable").append('Fail to get upload information from YouTube.').show();

Answer 3

我能想到的最简单的解决方案就是对代码做一个小小的修改。

<div id="alert" hidden="hidden">
 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
</div>

$('#alert').addClass("alert alert-danger alert-dismissable")
    .text('Fail to get upload information from YouTube.')
    .append('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>')
    .show();

这应该能做你想做的。按钮消失了，因为它不再是div标记的一部分。使用append()追加它将在您想要在div中放置的任何文本之后添加它。