$ .getScriptによって読み込まれたファイルの中に$（document）.ready関数を設定する方法

Question

私は、必要なときにのみコードを読み込むようにWebページのコードをコンパートメント化しようとしています。私は私のページの頭の部分に含まれている1つのjavascriptファイルを持っています。このページにはボタンがあり、これをクリックするとdivが前面に表示され、$ .getScriptを使用してdivが生成されます。新しく読み込まれたコンテンツは、2つの追加のdivと10個のボタンで構成されます。ただし、ボタンは機能しません。私のメインのHTMLページ、プライマリのjavascriptファイルまたは新しくロードされたファイルで$（ '＃element'）。click（）コードを置くかどうかは、動作しません。フォーマットが間違っているのですか、これは決してうまくいかないものですか？

$(document).ready(function() { 
     alert("Test"); /*  This works  */ 
     $('#slideButton1').click(function() { 
       alert("Testing");  /* This doesn't  */ 
     }); 
}); 

ボタンは、次のコードによって生成されます。

function addGalleryButtons() { 
     var sLabels = new Array("Aircraft","Avatars","BattleArmor","BattleMechs","Book Covers","Characters","Lego BattleTech","Maps","Naval Vessels","Vehicles"); 
     var leftIndent = 15; 
     for(var i=0; i<sLabels.length; i++) { 
       var slBtn = $(document.createElement('div')).attr('id','slideButton'+i); 
       slBtn.addClass('base shadowed rad3 gSlideButton'); 
       slBtn.html(sLabels[i]); 
       var slb = { 'left' : leftIndent+'px' , 'opacity' : '0.7' }; 
       slBtn.css(slb); 
       slBtn.attr('title','slideButton'+i); 
       slBtn.appendTo('#gallerySlider'); 
       leftIndent = leftIndent + $('#slideButton'+i).width() + 12; 
     } 
} 

Answer 1

あなたの問題はあなたが$('#slideButton1')にバインドするとき、それはDOMに存在しないということです。解決策は、onメソッドを使用して$('#gallerySlider')要素にバインドすることです。

$('#gallerySlider').on('click', 'div', function(e){ 
    console.log($(this), $(this).attr('id')); 
}); 

divにクラス名を付けてそのようにターゲットを設定することをお勧めします。

$('#gallerySlider').on('click', '.myClassName', function(e){ // etc 

Answer 2

イベントが配線されていないのは、これらの要素がまだDOMにないためです。そのため、ボタンが機能しないのです。私は助けることはできませんが、あなたが本当に探しているものは、オンデマンドでスクリプトを読み込む方法だと考えています。私は個人的にrequire.jsをお勧めします。これは、あなたがしようとしていることを正確に行うJavaScriptモジュールローダーです。かなり簡単です。 Get started here.プッシュが必要な場合は私にメールしてください。

Answer 3

まず、jsFiddleを提供できると幸いです。これらの2つの関数が呼び出される順序に関する情報は提供しません。

しかし、私はできればこれをコメントに書きましたが、私の評判が十分でないため、私はできません。だからここであなたのソリューションへのアプローチを試みます。

アンラインczarchaic、私はonを使用しません。私はliveメソッドを使用します。追加情報、パラメータリスト、および例については、documentationを参照してください。しかし、これにはいくつかの欠点があります。 liveメソッドがかなりのパフォーマンスを食べるので、この方法論は嫌です。イベントのチェックが必要な要素を制限するため、デリゲートが優先されます。 thisのような記事を考えてみましょう。私が読んだ記事は覚えていませんが、情報はかなり似ていると思います。

Answer 4

返されたjavascriptによって呼び出される関数にイベントハンドラを配置すると、うまくいくはずです。 機能（）addHandlers {$（ '＃slideButton1'）をクリックします（関数（）{}

その後、あなた返されたJavaScriptの終わりに：。。 addHandlers（）;これは非常によく働いた