任何阻止 JQuery 吃掉我的 <script> 标签的方法答案

【问题标题】：Any way to stop JQuery eating my <script> tags任何阻止 JQuery 吃掉我的 <script> 标签的方法
【发布时间】：2011-08-01 08:45:01
【问题描述】：

我的 HTML 中有内联 javascript。每个需要动画或动作的单独组件（滑块、扩展文本区域等）都有自己的内联脚本，用于为单独的组件设置动画等。

我设置它的方式，每个脚本都依赖于位置：它引用自己在 DOM 中的位置，并遍历它以找到它想要操作的组件（例如“将 onclick 添加到父 div”）。这通常是一个非常糟糕的主意，原因如下：

然而，第二个问题很容易用 GZIP 解决，我已经解决了第一个和最后一个问题。

这具有引用局部性的优势：组件和它们所需的脚本保存在一个地方，而不是分散在单独的文件中。另外，我将每组脚本隔离在一个 (function(){})() 中，并避免污染全局命名空间，因此每个组件的每组脚本都编写一次，根本不与其他地方编写的脚本交互。完美的模块化

所以问题是，当我执行 Ajax DOM 插入/替换时，如何阻止 JQuery 吃掉我的脚本标签？如果它没有吃掉我的脚本，因为每个组件都完全独立于它自己的脚本，我可以简单地在新组件的 DOM 中运行每个脚本标签，就是这样；一切都会建立起来。不再需要根据更改的组件来决定需要重新运行哪些全局脚本。

然而，由于 JQuery 似乎坚持剥离我的脚本标签并将它们移动到某个地方，这不再有效。我可以通过修改替换整个文档的 HTML 来进行插入，但这会导致整个屏幕在回流时闪烁（以及其他问题）。有什么想法吗？

【问题讨论】：

很抱歉这么说，但您的整体方法并不是一个好的方法，原因有很多（您的问题就是其中之一）。
我不确定我是否在关注你；在这个演示中，脚本标签似乎仍然在同一个地方：jsfiddle.net/xMFKn 但是，如果您在加载页面时直接写入 DOM，这可能是页面加载后重新运行脚本的问题。
The reason for the disappearing script tags is explained here.
@Pointy：我知道这种方法在任何现有范例中都不是一个好方法。但是，我已经编写了自己的框架，因此我可以在我编写的源代码和获得输出的 html 之间拥有我想要的任何映射。我认为，抽象地说，让脚本独立于每个组件是一件很有价值的事情。在任何其他语言中，将程序编写为对一组全局变量进行操作的一大堆重叠的全局函数都是非常疯狂的。我想看看我能否让这个范式发挥作用。
您对 GZIP “解决”第二个问题的把握有多大？

【解决方案1】：

我不明确了解 jQuery，但大多数库都会从 XHR 返回的内容中删除脚本元素，这些内容是他们打算使用 innerHTML 插入的。这是因为插入 innerHTML 不会执行脚本（在绝大多数浏览器中）。查看 jQuery 源代码，load 方法去除了脚本元素。

所以他们去掉脚本元素，然后插入 HTML。这可确保脚本不会被执行或导致问题。

一些库有一个“执行脚本”（或类似的）标志，如果设置，意味着它们会将脚本元素内容传递给 eval，但也存在缺陷。

一种解决方案是将所有脚本 sn-ps 放入单独的文件中，然后在脚本元素上使用 src 属性。如果您找不到不删除脚本的 jQuery 方法，那么编写自己的“get”或“load”或任何不删除脚本的函数非常简单，或者使用已经编写的数千个函数之一。

如果你只使用脚本元素，你可以简单地创建一个脚本元素，设置 src 属性并将其放入 DOM（这是做 AJAX 的一种方法）。

【讨论】：

【解决方案2】：

在您的 html 中使用容器 div 为所有替换保留空间，以便您通过 AJAX 替换的所有内容在 DOM 中都有一个特殊的位置。 jQuery 不会吃掉你的脚本标签。

或者，您也可以在脚本标签上放置一个 id，然后使用该 id 访问。

【讨论】：