javascript - 使用 jQuery 在 AJAX 中执行 javascript

Question

我很好奇以下场景的影响:

例如，假设我正在定义一个 jQuery 单击事件

$(function()
{
    $('.someElement').click(function() { /*do something*/ };
};

它被加载到任意的HTTP GET中请求。
但这.someElement请求时最初并不存在于 DOM 中。

现在，如果我还有一个异步 AJAX 调用，它会插入一些 html 确实有这个 .someElement定义，例如

$.ajax(
{
    //options omitted for readability
    success: function(responseData)
    {
        $('#elementToInsert').html(responseData);
    }
});

加载并插入<div class="someElement"></div>进入页面。
似乎当点击.someElement时元素，执行 jQuery 单击事件中的脚本。

这让我有些烦恼。有人能解释一下为什么这有效吗？

还想象一下下一个场景:

与前面的示例一样，我请求相同的任意 HTTP GET 。但在此请求中，不包含点击事件。同ajax不过，调用已包含在内。

现在是 responseData 中的 html看起来像这样

<div class="someElement"></div>
<script>
    $(function()
    {
        $('.someElement').click(function() { /*do something*/ };
    };
</script>

当我点击.someElement时，我得到与第一个场景完全相同的行为。这让我更加烦恼，所以有人可以向我解释为什么这有效吗？

一些注意事项:

• responseData插入到 DOM 中的内容将位于 jQuery 库之前的某个位置。
• 我认为使用哪个服务器端框架并不重要，但就我而言，它是 ASP.NET MVC 5。
• 这些场景已在以下浏览器的最新版本中进行了测试:IE、Firefox、Chrome。

总结我的问题:上述场景如何工作(例如 jQuery 被执行)？

P.S. 有趣的是，在 this question 的答案中，说明了

JavaScript inserted as DOM text will not execute.

而就我而言，它已被执行。
它还指another question这解释了eval()必须调用才能执行 javascript。
另外this article解释了与我的场景相反的情况并提到了 eval() 的使用.

Answer 1

您所看到的是预期的行为。

如果加载包含脚本标签的 HTML，这些脚本标签在某些情况下将会被执行。
例如，如果 dataType 为 html 或 Content-type header 在服务器上以 jQuery 将其解析为 HTML 的方式设置，则 documentation州

"html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

在许多情况下，如果未设置 dataType，并且没有 header 或 mime 类型可供 jQuery 推断加载的数据类型，则默认值很可能是 text，其中不进行解析将完成，并且不会执行任何脚本

"text": A plain text string

甚至 jQuery load() 现在也有这种行为，并且文档明确指出

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded.

所以，是的，jQuery 将执行通过 ajax 调用获取的 HTML 内容中的脚本 block