Question

我之前在此论坛中遇到过编码难题：

Calling a JavaScript function returned from an Ajax response

但我没有找到令人满意的答案。为了更准确地解决我正在处理的问题，这里有详细信息：

我使用jquery

动态加载文档（HTML和javascript）

var url = 'document.php';
$('#container').load(url);

document.php的示例：

<form>
    <input name="firstname"></input>
</form>
<script>
    function dosomething()
    {
        console.log($('input[name=firstname]').val());
    }
</script>

* dosomething（）函数是我稍后想要调用的函数

然后我想调用该document.php中的函数。由于我的要求，我不想在文件加载后调用该函数，而是在我需要时稍后调用它。因为它是动态加载的，所以DOM无法识别这些函数。如何正确调用此功能？

谢谢

Answer 1

DOM无法识别功能

这听起来像您的其他功能包含在远程页面的$(document).ready()中。如果是这种情况，则它们超出了您从主页面中的代码调用它们的范围，您需要将它们移出ready处理程序以使它们可以全局访问。

编辑：其他可能性

head中的脚本标记 - 在html之后移动到body，或者在ajax回调中使用$ .getScript来检索

Answer 2

我认为您正在尝试实施名为on-demand javascript（或lazy-loading）的技术。换句话说，您的页面最初应该只加载一个小脚本 - 但是使用一些对象和函数，这些对象和函数在其他一些文件中可用，但在需要时会加载。

如果是这种情况，我必须提醒您：您可能需要更新现有代码。在所有枪支炽热的荣耀中，你应该首先检查它的存在 - 如果它不可用，请等待它的加载：

if (typeof lazyObjects.someLazyFunction !== 'function') {
  lazyLoad('lazyFunction.js');
}
lazyObjects.someLazyFunction();

这里的关键点是lazyLoad应该是同步。换句话说，您必须等到实际加载包含您的函数的脚本。否则，即使进行这种检查，也不会在调用时定义someLazyFunction。

反过来，

lazyFunction.js将包含一些将改变lazyObjects的代码，并将所需的方法添加为属性：

// in lazyFunction.js
lazyObjects.someLazyFunction = function() { ... }

虽然技术上可以在这些情况下使用全局（=window）对象，但我通常不会这样做 - 也不建议这样做。

看，它并不那么简单。）我建议阅读this article以了解有关此技术的更多信息 - 并实际使用一些已建立的组件在您的代码中实现它（其中一些在链接文章中提到）。

javascript - 如何调用从ajax新添加的函数

2 个答案: