使用jQuery在单个load语句中从多个文件调用函数 [英] Calling functions from multiple files within a single load statement using jQuery

问题描述

我正在尝试通过jQuery实现最基本的 include ，即在DOM准备就绪时从多个文件加载函数，但是显然事实并非如此:/p>

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);

解决方案

$(document).ready()在dom完成后执行，这可能发生在下载外部JavaScript文件之前，因此可能尚未定义foo和bar.

I'm trying to achieve the most basic include with jQuery, that is loading functions from multiple files when the DOM is ready, but apparently it turned out not to be so trivial:

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!");
}

With alert("Hello world!"); being the only statement that executes as expected. The folder locations are checked, as worked with the previous strategy (window.attachEvent)

I've tried moving the .ready()statement to the scripts.js file but that didn't helped much.

Any advice would me really appreciated. Thanks much in advance.

UPDATE

Currently I'm handling the function loading this way:

// 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);

解决方案

$(document).ready() is executed after the dom is complete which can happen before the external javascript files are downloaded so foo and bar may not be defined yet.

这篇关于使用jQuery在单个load语句中从多个文件调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！