从 Ajax 返回时执行 Javascript答案

【问题标题】：Executing Javascript on return from Ajax从 Ajax 返回时执行 Javascript
【发布时间】：2015-03-06 04:47:46
【问题描述】：

我的页面进行了 Ajax 调用，该调用返回一些 HTML 以嵌入页面和一个脚本以运行，将 JQuery 工具提示附加到嵌入式 HTML 的各种元素。 HTML 和脚本由我的 Django 后端作为 JSON 对象返回，并且在页面中显示正常，但是当我评估它时 Javascript 似乎不起作用：

$.ajax({
    type: "GET",
    url: "/url/to/ajax",
    data: {
        "foo": bar
    },
    success: function (data) {
        $("#my-table").html(data['html']);
        // alert(data['script']);  // this works: I can see the script
        eval(data['script']);
    },
    error: function () {
        $("#my-table").html('');
    }
});

脚本本身看起来像一系列表达式，例如：

$(".foobar1").tooltip({
    content: "The <em>foo</em> to the <strong>bar</strong>.",
    tooltipClass: "tt-ref",
    show: null,
    close: function (event, ui) {
        ui.tooltip.hover(

        function () {
            $(this).stop(true).fadeTo(400, 1);
        },

        function () {
            $(this).fadeOut("400", function () {
                $(this).remove();
            })
        });
    }
});

其中foobar1 是刚刚添加到#my-table HTML 中的HTML 中的一个类。

谁能看到我在哪里出错了？ jquery 和 jquery-ui 都加载到我的页面上。

【问题讨论】：

您在开发者工具的控制台中看到任何错误吗？
在一个 AJAX 响应中同时提供 HTML 和 Javascript 是非常规的。该脚本看起来是静态的 - 它不能作为初始页面加载的一部分在函数包装器中交付吗？
@Ako 控制台中没有错误，也没有工具提示。
@Roamer-1888 - 我无法在初始页面加载时提供它，因为我不知道会点击 27 个 foos 中的哪一个：当一个是时，我获取 10-20数据库表中的行并将工具提示附加到它们。有 >1000 行，所以我不想为所有这些静态定义我的工具提示。
xnx，事先不知道一切是 javascript 的标准票价。我看不到任何东西可以阻止在页面加载时传递函数并在 AJAX 传递的 HTML 放置的元素上调用函数。

标签： javascript jquery ajax

【解决方案1】：

你不需要eval 任何东西，让浏览器执行它。为此创建 script 元素，设置其内容并将其附加到 DOM：

success: function(data) {
    $("#my-table").html(data.html);
    $('<script>').html(data.script).appendTo('body');
},

另一个可能更好的选择是将脚本作为返回的 HTML 的一部分。

【讨论】：

这也执行 Javascript，我可以通过添加 alert() 调用来判断；但是，我仍然没有看到我的工具提示。我能否确定在执行此操作时 DOM 已更新？
是的，之前的.html(data.html); 到那时就完成了。确保您的脚本有效，针对正确的选择器，而不是错误。确定呈现 HTML 时，打开控制台并从控制台执行代码。脚本是否按预期工作？
谢谢 - 这很有帮助：正在执行脚本并将工具提示 HTML 添加到页面...问题一定是元素和工具提示之间的交互...

【解决方案2】：

你可以试试：

eval("data['script']");

【讨论】：