0

メインのナビゲーション リンクの 1 つに関数を適用しています。関数は次のようになります。

    $(function() {
       $('#menu-item-1137').click(function(){
           $('#waterfacts').attr('class', 'active');
           $('li#simple2Tab').attr('class','active');    
       });  
    });

そのため、私の目的は非常に単純です。そのアイテムをクリックすると、これらのクラスの変更が id 要素に適用されます。

私が直面している問題は、既に目的のページにいるときに関数が機能することですが、サイトのインデックスにいると仮定し#menu-itemて、ページに適用しようとしていると思われるため、関数をクリックすると機能しません現在閲覧中です。

だから私の質問は、最初にページが読み込まれるまで待ってから実行するように関数に指示するにはどうすればよいですか?

前もって感謝します。

4

2 に答える 2

0

.ready（）を使用してみてください。その中で、 .on（）を使用して関数を要素にバインドしてください。

これにより、ページが読み込まれた後にのみ関数が適用されるようになります。

例：

$(document).ready(function () {

    $("#menu-item-1137").on("click", function(){
        $('#waterfacts').attr('class', 'active');
        $('li#simple2Tab').attr('class','active'); 
    });

});​
于 2012-11-13T22:15:44.510 に答える
0

ショートカットがあるため、DOM がロードされた後に既にイベントをバインドしています。

$(function() {})

これはと同等です

$(document).ready(function() {})

jQuery .ready()

ページの最初の読み込み後にメニューを動的に変更/挿入しますか? その場合は、その後にイベントを適用する必要があります。

イベントをバインドする前に、要素が DOM にあるかどうかを確認することで、このような問題を簡単にデバッグできます。

$(function() {
    console.log($('#menu-item-1137').length);
    $('#menu-item-1137').click(function(){
       $('#waterfacts').attr('class', 'active');
       $('li#simple2Tab').attr('class','active');    
   });
});

コンソールの出力にゼロが表示される場合、要素はまだ DOM になく、イベントはバインドされません。この場合に役立つように、サイトの構造に関する詳細情報が必要です。

于 2012-11-13T22:29:29.690 に答える