0

必要な場合にのみコードをロードするために、Web ページのコードを区分化しようとしています。ページの head セクションに 1 つの JavaScript ファイルが含まれています。ページにはボタンがあり、クリックすると div が前面に表示され、$.getScript を使用して div にデータが入力されます。新しく読み込まれたコンテンツは、2 つの追加の div と 10 個のボタンで構成されます。ただし、ボタンは機能しません。$('#element').click() コードをメインの HTML ページ、プライマリ JavaScript ファイル、または新しくロードしたファイルのいずれに配置しても、機能しません。フォーマットが間違っているものがありますか、それとも決して機能しないものですか?

$(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;
        }
}
4

4 に答える 4

2

まず、jsFiddleを提供していただけると助かります。これら2つの関数が呼び出される順序に関する情報は提供しません。

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

czarchaic を unline します。私は使用しませんon。メソッドを使用しliveます。追加情報、パラメータ リスト、および例については、ドキュメントを確認してください。ただし、これにはいくつかの欠点があります。この方法はかなりのパフォーマンスを消費するため、この方法を嫌う人liveもいます。イベントをチェックする必要がある要素を制限するため、デリゲートが好まれます。このような記事を考えてみましょう。どの記事を読んだか覚えていませんが、情報はかなり似ていると思います。

于 2012-01-29T03:28:23.687 に答える
1

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

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

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

$('#gallerySlider').on( 'click', '.myClassName', function( e ){ // etc
于 2012-01-29T03:21:00.007 に答える
0

これらの要素はまだDOMにないため、イベントは配線されていません..そのため、ボタンが機能しません。あなたが本当に探しているのは、オンデマンドでスクリプトをロードする方法だと思わずにはいられません。個人的にはrequire.jsをお勧めします。これは、あなたがやろうとしていることを正確に実行する JavaScript モジュール ローダーです。それはかなり簡単です。 ここから始めましょう。 プッシュが必要な場合は、私にメールしてください。

于 2012-01-29T03:21:09.273 に答える
0

返された JavaScript によって呼び出される関数にイベント ハンドラを配置すれば、問題ありません。function() addHandlers{$('#slideButton1').click(関数() { }

次に、返された JavaScript の最後に: addHandlers();

于 2012-01-29T04:07:35.387 に答える