Question

我想知道是否有办法在ajax动态加载的内容中执行脚本。我搜索过网络，这个论坛也找到了很多答案，比如

[Running scripts in an ajax-loaded page fragment [1]：Running scripts in an ajax-loaded page fragment [1]

但这似乎对我来说都不行。我没有作为引用帖子的作者的经验，所以也许我们可以找到一个更简单，更适合每个人的解决方案。

现在，我已经实施了一个棘手的转变，这对于大部分硬编码解决方案来说都是有气味的：

//EXECUTE AJAX REQUEST LET'S SAY SUCCESSFULLY,

$ajax([..]) //THEN 
.ajaxSuccess(function(){     
    // LOCATE ANY OBJECT PRE-MARKED WITH A SPECIFIC CLASS
    $(".script_target").each(function()
    {   
      //DO SOMETHING BASED ON A PRESET ATTRIBUTE OF THIS SPECIFIC ELEMENT
      //EXAMPLE: <div class=".script_target" transition="drop_down">...</div>
      //WILL FIRE A SCRIPT RELATED TO drop_down CASE.
    });
});

我知道这是一个丑陋的解决方案，但我没有提出比这更好的方法。你能帮忙改进这种方法吗？也许有办法让浏览器自动在加载的页面中激活脚本？

PS。如果它不是最后一个解决方案，我将不会使用eval（）方法，导致安全漏洞和全局减速，并且要注意启动的脚本需要修改加载在脚本的同一片段中的对象。

提前致谢。

Answer 1

如果我理解正确的话：

使用“load”从服务器检索html内容，然后将其添加到页面中。
之后，你进行ajax调用，并且在返回ajax调用时，你想对你之前添加的标记采取行动
但是，根据检索到的标记，您希望在ajax回调中执行不同的操作

另一个问题是：在加载标记之前，您是否知道它背后会有什么逻辑，或者您是否真的需要“读取”返回的HTML以了解它将用于什么？

否则也许这样的事情会起作用：

在“$ .load”函数的回调中，使用$ .data（）将更多信息附加到创建的dom对象
在ajax回调中，您应该能够访问“已添加”标记（使用类似于您的类，或者如果可能，使用id），并读取“数据”以了解您应该具有哪些行为？

希望我的问题是正确的，如果你能够创建一个jsfiddle或其他东西，它可能有所帮助，只是为了确保我们理解它。

希望这有帮助。

编辑：评论之后，它可能与您在调用$ .load（）时使用的选择器有关。

$ .load文档中有一个“脚本执行”部分：http://api.jquery.com/load/，它解释了如果在URL中添加选择器，脚本不会被执行，如下所示：

$('#b').load('article.html #target');

这可能是你的问题吗？

另外，如果可能的话，你可以尝试更改你的网站，这样你就可以把它放在一个单独的javascript文件中，而不是在运行时加载一个单独的javascript文件（例如，使用require js）。

这样，“加载”页面将是：

$.load("url_of_a_page_markup.html", function () {
  require(["url_of_the_javascript_module.js"], function (TheJsModuleForThePage) {
     TheJsModuleForThePage.doSomething();
  });
});

如果以一致的方式构建JS模块，并为markup和js文件的名称定义约定，则可以对事物进行概括，以便“gallery”管理器处理所有这些代码加载，并且您将最终为每个页面提供隔离良好的js模块。

希望这会有所帮助。

Answer 2

如果要在加载了ajax的页面片段中运行脚本，可以尝试使用jQuery.load函数。

Answer 3

您是否考虑过像require.js或Lab.js这样的模块加载器？

还有很多人提出类似的问题：

编辑：我想我误解了你的问题。将尝试并提出一个更好的答案。遗憾！

祝你好运！

Answer 4

当我动态加载一些HTML以在JQuery UI对话框（我的应用程序的帮助功能）中使用时，我遇到了同样的问题。

$('#helpMessage')
.load('./help/' + helpFile, function () {...do stuff after loading});

为了简单起见，我想在我加载的HTML片段中组合与帮助页面相关的独特脚本。使用JQuery UI页面上的示例，我创建了一个带有Jquery UI按钮元素的对话框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Icons</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  (function() {
    $('#myButton')                     // My button element
    .button()                          // Initialize it as a JQuery UI button object
    .click(function (){                // Hook up the button click event
        $('#correct')[0].play();       // to play a sound in an <audio> tag
    });
  });
  </script>
</head>
<body>
    This is my help file, this is my code.  This is for reading, this is for fun. 
    <button id="myButton">Button Text</button>
</body>
</html>

将加载对话框并显示HTML，但嵌入式脚本未执行。

我意识到一个简单的改变就能解决它。该脚本嵌入在匿名函数中（最佳实践和JQuery UI演示代码的一部分）。通过立即调用匿名函数，脚本在我将HTML片段加载到主页面时执行。

此：

<script>
    (function() {
     ...
    });
</script>

变成了：

<script>
    (function() {
     ...
    })();                // Immediately invoke
</script>

nice值。

如何运行使用javascript动态加载的脚本

4 个答案: