0

データベースへのAJAX呼び出しを介して5秒ごとにデータが入力/更新されるテーブルがある機能的な使用のWebサイト（公共の使用ではなく、目的を達成するための手段を提供するWebサイト）があります。

私がしたいことは、チェックボックス (テーブルのセルの 1 つにある) をクリックすると、その行にクラスが追加されることです。データがAJAXから来ているという事実が気に入らないことを除けば、サンプルの静的テーブルを入れてみましたが、うまく機能しますが、AJAXテーブルと同じ情報は何もしません。

私はこのリンクをチェックしましたが、それも私のアクションに応答しませんでした。以下に提供したJSコードは、私が使用しているもので、静的テーブルで機能しました

JS/AJAX

<script>
function getMessage(){
    var xmlhttp;
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
       if(xmlhttp.readyState==4 && xmlhttp.status==200){
       var res = xmlhttp.responseText;
         $('#message tr:first').after(res);
       }
    }
    xmlhttp.open("GET","ajax/message.php",true);
    xmlhttp.send();
};
</script>

強調するために使用しているJSコード

$(document).ready(function() {
  $('#lectern_message tr')
    .filter(':has(:checkbox:checked)')
    .addClass('selected')
    .end()
  .click(function(event) {
    $(this).toggleClass('viewing');
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).attr('checked', function() {
        return !this.checked;
      });
    }
  });
});

AJAX によるテーブルの例

<table id="message" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <th>Speaker</th>
      <th>Question</th>
      <th>Time</th>
      <th>View</th>
    </tr>
      <td class="name">Mr A</td>
      <td class="message">Hi</td>
      <td class="date">11:14:12</td>
      <td class="view"><input type="checkbox" value="no"></td>
    </tr>
    <tr>
      <td class="name">Mr B</td>
      <td class="message">Hello</td>
      <td class="date">10:32:36</td>
      <td class="view"><input type="checkbox" value="no"></td>
    </tr>
    <tr>
      <td class="name">Mr C</td>
      <td class="message">Question</td>
      <td class="date">10:32:18</td>
      <td class="view"><input type="checkbox" value="no"></td>
    </tr>
    <tr>
      <td class="name">Mr D</td>
      <td class="message">Hi</td>
      <td class="date">10:30:53</td>
      <td class="view"><input type="checkbox" value="no"></td>
    </tr>
  </tbody>
</table>

大量のコードで申し訳ありませんが、重要な部分を提供すると思っていましたが、言及されている message.php ファイルは、データベースからすべてのレコードを取得するための単なる呼び出しですが、その部分は正常に機能します。誰かが私に大きな助けになる手を貸してくれたら、どうもありがとう

4

1 に答える 1

1

click()ロード時にすべて存在する要素にバインドされます。動的に追加された要素に click() を使用する場合は、jQuery の live() または on() メソッドを使用する必要があることに注意してください...したがって、コードを次のように変更する必要があります。

$(document).ready(function() {
  $('#lectern_message tr')
    .filter(':has(:checkbox:checked)')
    .addClass('selected')
    .end()
  .live('click', function(event) {
    $(this).toggleClass('viewing');
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).attr('checked', function() {
        return !this.checked;
      });
    }
  });
});

その他の例については、こちらをご覧ください

于 2012-11-27T12:47:31.383 に答える