2

カスタム jQuery イベント ハンドラを含むリモート JavaScript ファイルがあります。これが要素として DOM に挿入される<script src='...'></script>と、カスタム イベント ハンドラは登録されません。

しかし、ストレート JS ( ) とまったく同じスクリプトを追加すると<script>...</script>、イベント ハンドラーが登録され、すべてが期待どおりに実行されます。

スクリプトがリモート ファイルとして挿入されたときに、イベント ハンドラーが jQuery にバインドされないのはなぜですか?

例

カスタム イベント ハンドラを含むリモート ファイル:

console.log('Before custom event handler');
$('button').on('customEvent', function(){
    console.log('customEvent Caught');
});

https://gist.github.com/2767385

スクリプトを DOM に挿入する(動作しない) JavaScript:

var scriptNode = document.createElement('script');
    scriptNode.src = 'https://gist.github.com/raw/2767385/b9ddea612ff60b334bd2430e59903174e527a3b5/gistfile1.js';
document.body.appendChild(scriptNode);

DOM にインラインとしてスクリプトを挿入する(有効な代替) JavaScript:

var scriptText = "console.log('Before custom event handler'); $('button').on('customEvent', function(){ console.log('customEvent Caught'); });",
    scriptNode = document.createElement('script');
scriptNode.appendChild(document.createTextNode(scriptText));
document.body.appendChild(scriptNode);

イベントのトリガー:

$('button').triggerHandler('customEvent');

JS が正しく読み込まれ、ハンドラーが正しく実行されます。

JSFドルズ

リモートファイル- 動作しない例: http://jsfiddle.net/3CfFM/3/
テキストの使用- 動作する代替: http://jsfiddle.net/3CfFM/2/

何が起こっていますか？

スクリプトがリモート ファイルとして挿入されたときに、イベント ハンドラーが jQuery にバインドされないのはなぜですか?

4

1 に答える 1

1

あなたは間違っています。リモートスクリプトで使用すると、イベントハンドラーがバインドされます。少し時間がかかります。ブラウザは、ハンドラーをバインドする前にHTTPリクエストを行う必要があります。これはtriggerHandler('customEvent')、バブリングとキャプチャがすでに完了しているため、トリガーした元のイベントがキャプチャされないことを意味します。

1秒待ってからボタンをもう一度クリックすると、イベントハンドラーが実際にバインドされていることがわかります。triggerHandlerスクリプトがロードされるまで呼び出しを遅らせることによっても、これを確認できます。

$('button').click(function() {
    var scriptNode = document.createElement('script');
    scriptNode.src = 'https://gist.github.com/raw/2767385/897cffca74411dbb542c0713bacb5a4048d6708b/gistfile1.js';
    scriptNode.onload = function() {
        $('button').triggerHandler('customEvent');
    };
    document.body.appendChild(scriptNode);
});

http://jsfiddle.net/3CfFM/4/

于 2012-05-22T23:44:32.050 に答える