1

PHPデータベースクエリで埋められるページを作成しました（すべての行がMySQLテーブルから読み取られ、HTMLでテーブルに書き込まれます）。10 秒間すべて、同じ PHP スクリプトが jQuery AJAX によって要求され、現在のテーブル コンテンツを更新する必要があります。この関数の戻り値は、テーブルの HTML 値を変更するために使用されます。

テーブルにはいくつかのボタンがあります。クリックすると、オンからオフ (またはその逆) に切り替わり、別の PHP ファイルが AJAX で呼び出され、シェル コマンドを介して 433MHz ワイヤレス ソケットを制御します。これらの 10 秒間の ajax-refresh の目的は、ボタンを電気ソケットの実際の状態 (MySQL データベースに保存されている) と同期させることです。

$(document).ready(function(){
  $(".toggle").click(function() {
    if($(this).hasClass("ein")) {
      $(this).removeClass("ein");
      $(this).html("aus");
      $.post("various/executeCode.php", {transmitted:true, id:$(this).attr('id'),  toggle:'0'}, function(result) {
      });
    } else {
      $(this).addClass("ein");
      $(this).html("ein");
      $.post("various/executeCode.php", {transmitted:true, id:$(this).attr('id'), toggle:'1'}, function(result) {
      });
     }
  });
});


window.setInterval("reloadPage()", 5000);
function reloadPage()
  {
    $.get('various/reloadPage.php', function(data) {
      $("#content").html(data);
  });
}

$stmt = $dbh->query("SELECT * FROM `funksteckdosen`");
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach($row as $r)
{  
  echo "<tr>";  
  echo "  <td>" . $r['name'] . "</td>";  
  echo "    <td><button id='" . $r['id'] . "' class='toggle" . ($r['toggle'] == 0 ? "" : " ein") . "'>"     
    . ($r['toggle'] == 0 ? "aus" : " ein") . "</button></td>";  
  echo "</tr>";
}

現在、次の問題があります。AJAX によって初めてページが更新されるとすぐに、ボタンが機能しなくなります。Javascript は click() 関数を実行しなくなりました。何故ですか？問題 2: テーブルの内容が削除され、新しいものに置き換えられます。新しい行 (またはボタンの背景色) を表示するだけでなく、フェードインすることはできますか? それが最後の仕上げになります。

私の説明を理解していただければ幸いです。

4

2 に答える 2

0

新しいボタンにはハンドラーがアタッチされていなかったため、クリック ハンドラーは機能しなくなりました。次のようなハンドラをアタッチすると:

$(".toggle").click(function() {

jQuery が行うことは、現在存在する .toggleすべての要素を見つけて、それぞれにその関数をハンドラーとして追加することです。新しいものは後で AJAX 呼び出しを介して追加されるため、それらはそのセットには含まれず、したがって、その関数がそれらに添付されることはありません。

jQueryがこれに対処する方法は、.on()関数を使用することです。using の構造は非常に似ています。

$('body').on('.toggle', 'click', function() {

ここでの違いは、関数にバインドされたクリック イベントを実際に取得する要素です。これにより、クリック イベントが実際にbodyタグに追加されます。これは、AJAX 呼び出しから変更されていません。動的要素の不変の共通の親はすべて機能し、かなりトップレベル'body'でdocumentあるため、通常はデフォルトとして使用されます。

いずれかの子要素がクリック イベントを発生させると、そのイベントはすべての親要素に続きます。したがって、最終的には などの共通の親に到達し'body'ます。この.on()関数には、最初の引数として 2 番目のセレクターもあります。そのセレクターは、関数を呼び出す前に、クリック イベントの元の要素をフィルター処理します。

このアプローチを使用する利点は次のとおりです。

  • 多くの要素に多数のイベント ハンドラー関数が関連付けられているのではなく、1 つの共通の親に関連付けられているイベント ハンドラー関数が1 つだけあるため、大規模なページや複雑なページでパフォーマンスが向上する可能性があります。
  • ページの有効期間の後半に共通の親要素に追加された子要素は、追加された時期に関係なく、クリック イベントを親に送信するため、引き続き処理されます。（これはあなたの状況での即時の利益です。）

コンテンツのフェードインについては、達成しようとしている効果が理解できれば、既にあるものをフェードアウトして削除し、新しいコンテンツを追加してからフェードインするなどの方法を試すことができます。おそらく次のようなものです。

$.get('various/reloadPage.php', function(data) {
    $('#content').fadeOut(400, function() {
        $("#content").html(data);
        $('#content').fadeIn();
    });
});

比較的新しい「約束」モデルでこれと同じことを達成するための新しい構造があるかもしれませんが、本質的にこれが行うことは、コンテンツをフェードアウトさせ、フェードアウトが終了したときに呼び出すコールバック関数を含めることです。そのコールバック関数は、HTML を置き換えてからフェードインします。HTML の構造によっては、対象の親要素ではなく親要素をフェードアウト/フェードインする必要があるかもしれませんが、ここでアイデアを得て、正しく見えるまで微調整できます。

于 2013-07-27T00:27:18.393 に答える
0

問題 1: クリック イベント ハンドラーは最初のトグル クラス要素にバインドされていますが、動的に作成されたイベントはバインドされていません。

live()またはを使用on()して、動的に作成された要素をバインドしてみてください。参照:動的に作成された要素のイベント バインディング?

問題 2:#content使用時に置き換えられるhtml()

append()を使用して、既存の要素にデータを追加してみてください。を使用html()すると、要素の内容が置き換えられます。

hide()aと aを連鎖させてfadeIn()、追加をアニメーション化しました。

$('#content').append(data).hide().fadeIn(1000);

于 2013-07-27T00:31:32.703 に答える