jquery ajax加载后丢失css

Posted 2023-02-24

【中文标题】jquery ajax加载后丢失css

【英文标题】：losing css after jquery ajax load

【发布时间】：2012-03-01 00:06:12

【问题描述】：

大家都知道如何在使用 $.load 的 Ajax 请求后解决 css 的问题吗？例如，如果我只想从网页加载一个 DIV，在我的 Ajax 请求之后：

$('container').load('path_to_div #div_id');

我丢失了与该 div 关联的所有 css 和脚本

有什么建议

【问题讨论】：

通过关联，您的意思是“在” div 的“内部”（在内部声明），或者您遇到了不再应用样式并且未绑定 javascript 事件的问题？

不再应用样式和javascripts

这可能是因为应用于另一个样式的样式在新元素上不再匹配。因此他们被忽视了。

能否给我们举个例子，说明ajax调用后产生的html内容，以及应该应用的css规则。

@user765368 你能解决这个问题吗？您能否分享一下可行的解决方案？

【参考方案1】：

是的，当内容被 AJAX 替换时，附加的任何事件处理程序都将断开连接。您可以使用 jQuery 的 .on() 或 .live() 作为替代事件挂钩来防止这种情况发生。

至于 CSS，您可能在原始内容上获得了替换内容中缺少的类名或 ID，或者替换内容与您在 CSS 中设置的选择器不匹配。

没有看到您的 HTML/CSS 就无法分辨。

【参考方案2】：

将元素（及其子元素）的所有 CSS 包含在一个 CSS 文件中，该文件包含在您将加载它的主页中。因此，如果您有main.html，并且您正在将#div_id div 加载到该页面中，您需要在main.html 中包含#div_id 的CSS。

您还需要包含一个可以将事件处理程序委托给 AJAX 加载的内容的脚本，例如 .delegate()（适用于 1.7 之前的 jQuery 版本）或 .on()（适用于 jQuery 1.7+）。

【参考方案3】：

我遇到了那个错误，解决方案是：

$('#contentPagina').load(nombrePagina,function() $('#contentPagina').trigger('create'); );

【讨论】：

我已经找了一个小时了。谢谢！

【参考方案4】：

您可以像在this answer 中那样动态加载 CSS，或者将它们添加到您要加载 div 的页面的 CSS 文件中。

至于外部脚本，$.getScript() 应该会解决您的问题。