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

【问题标题】：javascript - how to call a function newly added from ajaxjavascript - 如何调用从 ajax 新添加的函数
【发布时间】：2012-06-26 05:29:03
【问题描述】：

我有一个以前在这个论坛上被问过的编码困难：

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>

*dsomething() 函数是我想稍后调用的函数

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

谢谢

【问题讨论】：

你的意思是有脚本元素，里面有你要调用的函数？
那个名字是回调函数，你可以在jquery.com文档中找到更多
在document.php中有html和script
如果远程的所有 html 都被加载了，这个功能应该是可访问的
@charlietfl 不幸的是，新添加的元素或函数不会自动添加到 DOM (CMIIW) 中，javascripters 通常使用 jquery 或其他 js 框架的 'delegate/on/live' 方法处理新添加的元素： D 但是如何调用一个新添加的函数呢？ :D 这就是问题

标签： javascript jquery dom dynamic

【解决方案1】：

DOM 无法识别函数

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

编辑：其他可能性

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

【讨论】：

我的函数被包装在一个普通的标记中（在 document.php 中）而不是在 $(document).ready() 如果这就是你的意思:)
那么DOM doesn't recognize 没有意义......他们在头脑中吗？如果是这样，请查看使用 $.getScript，或将它们移到 html 下方
您的加载方法是否在要在远程页面中查找的 url 之后包含一个 css 选择器？ load('page.php #someId')
脚本被加载到一个 div 容器中（所以它们绝对不在头部：D），我没有在 url 之后包含 css 选择器：D
没有想法抱歉，我只是尝试了一个简单的测试，效果很好。加载其他页面后从控制台调用该函数。加载后控制台中的任何错误？

【解决方案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 以了解有关此技术的更多信息 - 并实际使用一些已建立的组件在您的代码中实现它（其中一些在链接的文章中提到）。

【讨论】：