如何使 $.load() 执行通过 AJAX 在 HTML 中返回的脚本？答案

【问题标题】：How to make $.load() execute scripts that get returned in HTML via AJAX?如何使 $.load() 执行通过 AJAX 在 HTML 中返回的脚本？
【发布时间】：2016-01-11 06:52:04
【问题描述】：

我正在进行 AJAX 调用并取回一个 partialView。在这个 partialView 中，我有要执行的脚本。在互联网上搜索后，我发现我需要使用“eval”才能完成这项工作。在这之后我发现 $.load() 方法为我做了这个。

但它对我不起作用。

我的代码：

查看：

<div class="col-md-12" id="headerContainer">
    <div class="col-md-4 col-xs-12 itemContainerHeader">
        <h4> Namn</h4>

    </div>
    <div class="col-md-4 col-xs-12 itemContainerHeader">
        <h4> Epost</h4>
    </div>
    <div class="col-md-4 col-xs-12 itemContainerHeader">
        <h4> Nummer</h4>
    </div>
</div>

@foreach (var c in Model.Customers)
{
    <div class="col-md-12 col-xs-12 containerListItem">

        <div class="col-md-4 col-xs-12">
            @(c.FirstName + " " + c.LastName)
        </div>
        <div class="col-md-4 col-xs-12">
            @c.Email
        </div>
        <div class="col-md-4 col-xs-12">
            @c.PhoenNumber
        </div> 
    </div> 
}

@section Scripts {
    <script type="text/javascript">
            $.scissors.customers.init();
    </script>
}

使用 AJAX 加载页面时不会执行 init 方法：

  getView: function (url, callback, options) {
    var settings = {
        target: "#contentContainer"
    }

    $.extend(settings, options);

    $.LoadingOverlay("show");

    $(settings.target).empty().load(url, function (data) {

        if (callback)
            callback();
        $.LoadingOverlay("hide");
    });
}

$.load() 的 jQuery 文档：

脚本执行

当使用没有后缀选择器的 URL 调用 .load() 时表达式，内容在脚本被传递之前传递给 .html() 删除。这会在脚本块被丢弃之前执行它们。如果 .load() 是在 URL 附加一个选择器表达式的情况下调用的，但是，在更新 DOM 之前，脚本会被删除，因此不被执行。两种情况的示例如下所示：

在这里，任何作为文档的一部分加载到#a 中的 JavaScript 都会成功执行。

1 $("#a").load("article.html");

我错过了什么？

【问题讨论】：

我猜你需要在脚本之前加载一个库。
它在布局页面中加载，并且在我登录后一直存在
返回 PartialViewResult 时不呈现部分。

标签： javascript jquery html ajax asp.net-mvc

【解决方案1】：

这个脚本：

$.scissors.customers.init();

仅当主视图已全局加载库时才会执行。即页面头部的库：

<script src='jquery.js'></script>
<script src='scissors.js'></script>

如果scissors.js 在全局范围内可用，那么您的脚本将在您.load() 时执行。

【讨论】：

澄清一下：我的脚本已加载到母版页中并且可以访问，但由于某种原因 load() 函数似乎不包含脚本

【解决方案2】：

过了一会儿，我想通了。

问题是这里的剃刀语法：

@section Scripts {
    <script type="text/javascript">
            $.scissors.customers.init();
    </script>
}

我进行了 AJAX 调用并返回了一个 partialView，当新的 HTML 被附加到 DOM 时，浏览器不知道如何读取 razor 语法。

我只是像这样删除了 razor 语法并且它起作用了：

<script type="text/javascript">
        $.scissors.customers.init();
</script>

但我想指出，这曾经是/不是最佳实践解决方案。我有一个 getView 函数，它也接受一个回调参数，最好在回调中调用 init 函数，如下所示：

     $.scissors.worker.getView("/Customer/GetCustomer", function () {
            $.scissors.customers.customerCard.edit.init();
        }, options);

【讨论】：