CSS 未应用于使用 JQuery 动态添加的元素答案

【问题标题】：CSS Not Applied to Element Dynamically Added with JQueryCSS 未应用于使用 JQuery 动态添加的元素
【发布时间】：2018-10-30 17:18:04
【问题描述】：

我在我的 javascript 代码中执行此操作：

$("#m_modal_6 .modal-body").append('<button type="button" class="btn btn-success m-popover" data-trigger="hover" data-skin="dark" data-toggle="m-popover" data-placement="bottom" title="Dark skin" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Dark skin</button>');

在我准备好的文档中，我这样做是为了显示弹出框：

$('.m-popover').popover('show');

我在 css 中有深色皮肤的类，可以在 html 中使用，但是当我使用附加功能添加它时，深色皮肤和其他样式不起作用..

【问题讨论】：

所以你在追加之前显示弹出框？
$('#m_modal_6').on("shown.bs.modal", function() , 在我显示模态之后
你正在为btn添加css？
您的 porblme 可能是，您的 CSS 未应用于正文。 popovr 将其容器附加到正文。
data-skin 是这里的关键.. 当我在 html 中使用 simple 时，它可以工作，但是当我在 javascript 中使用 append 时，它不再工作了..

标签： javascript popover

【解决方案1】：

当调用$(".m-popover") 时，JQuery 将选择类.m-popover 的所有当前元素。问题是您在修改 .m-popover 选择器后附加了对象。 document.ready 将在其他脚本加载后调用。我会做以下事情：

let obj = $('<button type="button" class="btn btn-success m-popover" data-trigger="hover" data-skin="dark" data-toggle="m-popover" data-placement="bottom" title="Dark skin" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Dark skin</button>');
obj.popover('show');
$("#m_modal_6 .modal-body").append(obj);

【讨论】：

感谢您的回复。我把你的想法付诸实践，但我仍然得到相同的风格..