为什么.on(“load”，.)为脚本标签触发回调吗？

Question

我有以下代码，它加载外部脚本并在加载时执行一些代码：

$('<script/>', {
    type: 'text/javascript',
    src: 'https://raw.github.com/einars/js-beautify/master/beautify.js'
}).on('load', function() {
    alert('jsb loaded' + typeof js_beautify);
}).appendTo('body');

但是，即使脚本已正确加载，也不会触发该事件，

window.setTimeout(function() {
    alert(typeof js_beautify);
}, 1000);

这会提醒function很好。

演示：http://jsfiddle.net/ThiefMaster/x2b9x/

Answer 1

您应该调用$.getScript()，它正是这样做的，并且工作正常。

Answer 2

(jQuery:2.0.3)通过appendTo()在动态脚本标记注入上发生非触发加载事件的2个原因：

• 加载事件不是气泡事件。被调用的处理程序将只挂在特定元素上，only
• appendTo()并不像预期的那样将代码提供的元素注入DOM中。

getScript()直接使用DOM函数

document.head.appendChild( script[ 0 ] );

要插入脚本标记元素，请执行以下操作。这可以确保标记元素实际上被添加到DOM中。而appendTo()将尝试使用Ajax从源URL加载脚本。然后为window对象而不是脚本对象触发load事件。

下面是对jQuery.appendTo()的详细测试，以了解原因

                var $script = $("<script>", {
                    src: this.options.url_js,
                    "data-widget": this.widgetFullName,
                    type:"text/javascript"
                }).on(
                    "load error",
                    function( evt ) {
                        script.remove();
                        if ( evt ) {
                            alert( evt.type === "error" ? 404 : 200, evt.type );
                        }
                    }
                ).appendTo("head");

1. jQuery.on()将事件处理程序注册到"data_priv“中，在事件发生时使用元素作为
2. 键，jQuery将使用"jQuery.event.dispatch.apply( eventHandle.elem，参数)”调用处理程序。

jQuery.appendTo()是“追加”的别名。实际代码是

   append: function() {
    return this.domManip( arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.appendChild( elem );
        }
    });
}

在将元素实际注入DOM之前，它将使用domManip()执行一些ajax操作。

  domManip: function( args, callback, allowIntersection ) {

这个函数有两个关键变量，一个是“值”，第二个是“节点”。“值”是变量"$script“。实际注入的元素是“节点”，而不是"$script“。

  callback.call( this[ i ], node, i ); //inject the element into the DOM  

​

​

，这就是为什么"$script“上的”加载“事件处理程序根本不会被调用的原因。

但是这个load事件将被触发两次，1是针对加载的元素，(这里是节点)，另一个是窗口对象。如果您的处理程序挂在窗口对象上，它将被调用。