外部javascriptを動的にロードして特定のDOM要素または名前空間にバインドする

外部のjavascriptファイルを動的にロードし、メソッドをスクリプトからDOMの特定の要素にバインドできるようにしたいと考えています。それは可能ですか？どうやって？どのような制約がありますか？外部javascriptを動的にロードして特定のDOM要素または名前空間にバインドする

私は解決策は次のようになります想像するが、私は動作します何に開いている：

<html><body> 
    <div class="A">aaaaa</div> 
    <div class="B">bbbbb</div> 
    <div class="A">aaa</div> 
</body></html> 

<script type="text/javascript"> 
    //This is the internal script, part of the original page 
    $.get("url/outside_script.js", 
    function(script_obj){ 
     $(".A").bind('niftyMethod', script_obj.niftyMethod) 
    } 
); 
</script>

ここで外部スクリプトです：

<script type="text/javascript"> 
    var script_obj = { 
    niftyMethod : function(){ 
     //Do cool stuff in the context of a DOM object. 
     $(this).fadeOut(500,function(){$(this).fadeIn(500)}); 
    } 
</script>

outside_script.js私はしましたこれについてグーグルグーグルの良いビットを行ったが、多くを見つけていない。たぶん私は間違った検索用語を使用しています...？

NB：jqueryを使用するのはうれしいことです。

出典

2012-04-27 Abe

あなたの.jsファイル内のスクリプトタグを必要としない 'niftymethodは' ではありません。また – kroehre

ファイル通常のjavascriptイベントです。クリック時にscript_obj.niftyMethodを呼び出すには、.bind（ 'click'、script_obj.niftyMethod）を使用する必要があります。 – kroehre

メソッドを標準イベントにバインドできます。この例はより一般的なケースです：任意のイベントへのバインディング。 – Abe

一部訂正：

スクリプト：

<script type="text/javascript"> 

    //add script to page 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = "url/outside_script.js"; 
    $('body').append(script); 

    //on document ready, bind your function 
    $(function(){ 
     $(".A").bind('click', script_obj.niftyMethod) 
    }); 

</script>

外部ファイル：

var script_obj = script_obj || { 
    niftyMethod : function(){ 
     //Do cool stuff in the context of a DOM object. 
     $(this).fadeOut(500,function(){$(this).fadeIn(500)}); 
    }

出典

2012-04-27 03:41:09 kroehre

これは良いことです。名前空間の衝突を防ぐ方法はありますか？例えば私はすでにメインスクリプトで定義されているscript_objオブジェクトを持っているとします。 outside_scriptが上書きしないようにする方法はありますか？ – Abe

のいずれかが最後になります。私はそれを説明するために私の答えを更新しました。 – kroehre

外部javascriptを動的にロードして特定のDOM要素または名前空間にバインドする

答えて

関連する問題