html元素上的引导模式附加缺少的css答案

【问题标题】：Bootstrap modal on html element append missing csshtml元素上的引导模式附加缺少的css
【发布时间】：2018-05-23 20:48:41
【问题描述】：

我有一个带有一些引导模式窗口的网站。在服务器渲染这些模态窗口时，一切都应该是这样，但是在加载（附加）新项目和他们的模态窗口之后，不知何故附加的模态没有引导 css。

步骤：

在 gridview 中打开网页会显示 30 个项目块
单击任何块显示具有正确 css 的模态
单击“加载更多”我正在使用 ajax 调用获取更多然后页面上的项目和服务器为这些项目生成 html 附加到特定的 div。
项目已正确附加，但单击附加项目模式窗口缺少 css。

可能我需要在将新项目附加到页面后调用引导 css 或 js？

【问题讨论】：

检查控制台，仅通过查看图片很难让您有根据地猜测问题。
我看到缺少一些像 div 这样的元素，在输入复选框或下拉列表周围有一些类，但在这两种情况下，我都使用生成模态的相同局部视图，我想我可能需要使用ajax将新元素附加到html后重新加载一些js或css文件，但不确定。
您不需要调用 css 或 js，只要您的引导类在最初加载时以相同的方式工作
@Nezir 如果您查看 document.ready 函数，应该调用所有类来初始化它们（例如标签列表）。添加新元素后，您需要在这些元素上调用 init 函数

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

在这里您通过 id 来识别元素。这就是为什么 JQuery 选择器只采用第一个匹配元素而忽略其他元素的原因。要解决此问题，请使用类来识别 JQuery 选择器中的元素。

【讨论】：

【解决方案2】：

我在这里找到了答案：bootstrap toggle doesn't work after ajax load

我的实际修复是在 ajax 成功后重新加载属性：

  setTimeout(function(){ 
     // add an element dynamically,
     // now that we have dynamically loaded elements
     // we need to initialize any toggles that were added
     // you shouldn't re-initialize any toggles already present
     // but we also do want to have to figure out how to find the ones we added
     // instead, we'll destroy all toggles and recreate all new ones
     $("[data-toggle='toggle']").bootstrapToggle('destroy')                 
     $("[data-toggle='toggle']").bootstrapToggle();
     $('.tags-list').tagsinput('refresh');

 }, 1000)

【讨论】：