5

AJAXをtable.tablesorter使用して頻繁に変更される要素があります。ヘッダーをクリックするたびに要素にデリゲートする「クリック」にイベントハンドラーを追加したいと思います。私はjQueryを使用するのが初めてです。そこで、以下の jQuery スクリプトを Chrome Web Console に入れてみます。table.tablesorter th.class

jQuery スクリプト:

$('#table-content').on(
    'click', 
    '.tablesorter thead tr th', 
    function() {alert(); }
);

私のHTML：

<div id="table-content">
    <table class="tablesorter">
        <thead>
            <tr>
                <th class="header">No.</th>
                <th class="header">Name</th>
                <th class="header">Phone</th>
            </tr>
        </thead>
    </table>
</div>

結果: テーブルのヘッダーをクリックしてもアラート ポップアップ ウィンドウは表示されません。

テーブルのヘッダーをクリックしたときに警告ダイアログを表示するには、何を変更する必要がありますか?

4

3 に答える 3

1

テーブルの読み込みに ajax を使用している場合は、次の 2 つのいずれかをお勧めします。

  1. ヘッダー セルが完全に置き換えられない限り、tbody 内の行のみを更新します。ヘッダー クリックの処理について心配する必要はありません。

    テーブルを完全なテーブルとして保存している場合は、他のオプション (推奨事項 #2) に従うか、テーブルを一時ホルダーにロードしてから、tbody を転送してテーブルを更新します。

    var $table = $('#table-content').find('table');
$('#hidden-div').load( "ajax.html", function() {
   // remove old tbody
   $table.find('tbody').remove();
   // move new tbody into the initialized tablesorter table
   $('#hidden-div').find('table tbody').appendTo( $table );
   // update tablesorter's cache
   $table.trigger('update');
});

  2. テーブル全体を置き換える場合は、tablesorter を再初期化してください。ajax は次のようになります。

    var options = { /* add tablesorter options here */ };

$.ajax({
  url: url,
  data: data,
  success: function(data){
    $('#table-content').find('table').tablesorter(options);
  },
  dataType: dataType
});
于 2013-10-30T03:39:13.743 に答える
0

あなたはこのコードを試すことができます

   $( "table.tablesorter tr th.header" ).click(function() {
  alert( "Handler for .click() called." );
  });
于 2013-10-29T08:21:51.637 に答える