Question

我正在尝试使用jQuery实现最基本的 include ，即在DOM准备就绪时从多个文件加载函数，但显然结果并非如此琐碎：

的index.html

<script type="text/javascript" src="res/scripts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        alert("Hello world!");
        foo();
        bar();
    });
</script>

scripts.js中

function foo(){
        alert("Hello from foo!");
}

function bar(){
        alert("Hello from bar!");
}

alert("Hello world!");是唯一按预期执行的语句。检查文件夹位置，与之前的策略（window.attachEvent）

一起使用

我已尝试将.ready()语句移至scripts.js文件，但这没有多大帮助。

任何建议我都非常感激。非常感谢。

更新

目前我正在以这种方式处理函数：

// Based on "Flexible JavaScript events" by John Resig: http://goo.gl/xLn4S
function addEvent( obj, type, fn ) {
    if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
        obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
        obj.addEventListener( type, fn, false );
}

function removeEvent( obj, type, fn ) {
    if ( obj.detachEvent ) {
        obj.detachEvent( 'on'+type, obj[type+fn] );
        obj[type+fn] = null;
    } else
        obj.removeEventListener( type, fn, false );
}

addEvent(window, 'load', foo);
addEvent(window, 'load', bar);

Answer 1

dom完成后执行

$(document).ready()，这可能在下载外部javascript文件之前发生，因此可能尚未定义foo和bar。

Answer 2

我认为这只是一个错字。它是警告而不是 altert ：

function foo(){
        alert("Hello from foo!");
}

function bar(){
        alert("Hello from bar!");
}

像Firebug这样的工具可以帮助解决这类问题。

Answer 3

首先，在用于检索javascript的网址中添加唯一编号，如：

<script type="text/javascript" src="res/scripts.js?111010101"></script>

确保浏览器检索最新版本的scripts.js。然后，每次检索页面时，都会生成一个新的唯一版本号。（至少在开发期间）

接下来，您需要确保在尝试调用其函数之前已加载并正确评估了script.js。

执行此操作的一种方法是在script.js的底部触发一个新的自定义事件，您可以在其上设置要执行的处理程序（在document.ready（）中）。

另一种方法是在尝试调用其任何函数之前在document.ready（）处理程序中加载脚本。

编辑添加示例：

<script type="text/javascript">
  document.ready(function(){
    alert('Hello World!');
    $.getScript('res/scripts.js', function() {
      foo();
      bar();
    });
  });
</script>

使用jQuery在单个load语句中调用多个文件中的函数

3 个答案: