-2

私のページの1つにこの構造があります： 

head  
    script  
   /script  
/head  
body  
    table1  
    table2  
/body

ここにJavaScriptがあります： 

<script type="text/javascript">
    $( function() {
      $('tr').click( function() {
         $(this).parents('table').find('tr').each( function( index, element ) {
              $(element).removeClass('selected');
         } );
         $(this).addClass('selected');
         $(this).removeClass('normal');
      } );
    } );
    $( function() {
      $('tr').hover( function() {
         $(this).addClass('highlight');
         $(this).removeClass('normal');
      } );
    } );
    $( function() {
        if($('tr').hasClass('selected')) {
        }
        else {
          $('tr').mouseout( function() {
             $(this).removeClass('highlight');
          } );        
        }
    } );
</script>

table1 はページをロードすることによって生成され、table2 は Ajax を使用して table1 の任意の行をクリックすることによって生成されます。

クリックまたはホバーすると、スクリプトはいくつかのクラスを tr (テーブルの行) に追加するので、スタイルを設定できます (背景色を変更します)。

スクリプトは table1 行に適用され、クラスを追加しますが、table2 行には適用されません!

任意の助けをいただければ幸いです。

4

3 に答える 3

4

これらのイベントは、ページの読み込み時に存在する要素にのみ適用されます。AJAX でロードされたテーブル (table2) に影響を与えるには、「ライブ」イベントを使用する必要があります。

このために、jQuery を使用できます.on。

$(function(){
    $(document).on('click', 'tr', function() {
         $(this).parents('table').find('tr').each( function( index, element ) {
              $(element).removeClass('selected');
         } );
         $(this).addClass('selected');
         $(this).removeClass('normal');
    });
    $(document).on('hover', 'tr', function() {
         $(this).addClass('highlight');
         $(this).removeClass('normal');
    });
    $(document).on('mouseover', 'tr', function(){
        if(!$(this).hasClass('selected')){
            $(this).removeClass('highlight');
        }
    });
});

注: の代わりにdocument、両方のテーブルの最上位の親を使用できます (それが DOM にある限り)。

UPDATE : if($('tr').hasClass('selected')) {DOM がロードされたときにのみ実行されます。そのチェックをイベント内に入れます。

PSこれらすべてを組み合わせることができます$( function() {。

于 2012-05-31T20:56:59.160 に答える
2

jQuery を使用する.on()とうまくいくはずです: (ドキュメント準備のための余分なイベント ハンドラーを削除しました)

$(function() {
    $('table').on('click', 'tr', function() {
        $(this).siblings('tr').removeClass('selected');
        $(this).addClass('selected').removeClass('normal');
    });
    $('table').on('hover', 'tr', function() {
        $(this).addClass('highlight').removeClass('normal');
    });
    $('table').on('mouseout', 'tr', function() {
        $(this).not(".selected").removeClass('highlight');
    });

});

編集: マウスアウトの not セレクターを修正しました。

これが実際のサンプルです: http://jsfiddle.net/JCbfw/

編集：もう少しタイトにしたい場合は、クリックコードが次のようになることに注意してください。

$('table').on('click', 'tr', function() {
    $(this).addClass('selected').removeClass('normal').siblings('tr').removeClass('selected');
});
于 2012-05-31T21:09:28.540 に答える
0

あなたの質問とは関係ありませんが、あなたのhover行動を CSS コードに入れると、はるかに良いでしょう:

whatever:hover {}
于 2012-05-31T21:10:14.667 に答える