0

動的な todo リストを作成しています。リストはローカル データベースからダウンロードされ、テーブルに表示されます。各 todo には送信ボタンがあり、これを押すと todo はデータベースに「完了」として登録されます。私のコードでは、これは status と呼ばれる変数を介して行われ、値 1 は実行され、値 0 は元に戻されます。

私の問題は、任意のボタンを押すことができ、すべてがうまく機能することです。新しいステータスが PHP スクリプトに送信され、データベース内のステータス値が変更されます。次に、Web ページは表示テーブルを自動的に更新します。しかし、もう一度試してみると、他のボタンのいずれかで機能しません。他のボタンを機能させるには、Web ページをリロードする必要があります。

これが私のJquery/AJAXコードです:

        $(document).ready( function() {
            $('#todo_display_table input[type="submit"]').click(function(evt) {
               evt.preventDefault();

               var todo_id = $(this).val();
               //document.write(todo_id);//debug
               $.when(changeTodoStatusTo(1, todo_id)).then(updateTodoDisplay);
            });
        });

        function updateTodoDisplay() {
            $.post("./daily_todo_display.php", null, replaceTbodyHTML);
        }

        function replaceTbodyHTML(data) {
            $('#todo_display_table tbody').html(data);
        }

        function changeTodoStatusTo(newStatus, todo_id) {
            //Send til phpscript som lagrer ny status i databasen
            var parameters = {
                todo_id: todo_id,
                newStatus: newStatus
            };

            return $.post("./daily_todo_change_todo_status.php", parameters); //, printDebugInfo);
        }

PHP スクリプトも投稿できますが、これらを個別にテストしたところ、動作するようです。繰り返しますが、私のページのすべての機能は問題なく動作しますが、1 回クリックすると機能が停止するようです。

データベースを確認しましたが、ステータス値は最初の試行時 (いずれかのボタンの最初のクリック) でのみ更新されます。これは、問題が click() 関数または changeTodoStatusTo() 関数のいずれかにあることを示しています。ご不明な点がございましたら、お気軽にお問い合わせください =)

4

6 に答える 6

3

jQuery の live 関数は使用しないでください。

jQuery 1.7 以降、.live() メソッドは非推奨になりました。.on() を使用して、イベント ハンドラーをアタッチします。古いバージョンの jQuery のユーザーは、.live() よりも .delegate() を使用する必要があります。

このメソッドは、デリゲートされたイベント ハンドラーをページのドキュメント要素にアタッチする手段を提供します。これにより、コンテンツがページに動的に追加されるときのイベント ハンドラーの使用が簡素化されます。詳細については、.on() メソッドの直接イベントと委任イベントの説明を参照してください。

jQuery ライブ ドキュメント

ドキュメントに記載されているように、代わりに .on() を使用してください。.live() と同じように機能します:)

于 2012-05-21T18:10:09.223 に答える
1

更新時に送信ボタンを再作成していますか??? すべてのコードを見ないとわかりません。これを変更しようとしましたか：

$('#todo_display_table input[type="submit"]').click(function(evt) {

これに：

$('#todo_display_table input[type="submit"]').live('click', function(evt) {

該当する場合はこれを参照してください: http://api.jquery.com/live/

于 2012-05-21T18:05:19.740 に答える
0

ブラウザーが POST 要求の応答をキャッシュするという問題に直面しているようです。これは、一部のブラウザでよく見られる問題です。ブラウザーは、実際のファイルではなく、URI に基づいてコンテンツをキャッシュすることを知っておく必要があります。つまり、クエリ文字列が含まれます。リクエストのキャッシュを回避する 1 つの回避策は、毎回わずかに異なる URI を使用することです。

$.post("./daily_todo_change_todo_status.php?t="+new Date().getTime(), null, callbackFn);

現在のタイムスタンプを挿入することにより、ブラウザーが要求の代わりにキャッシュされたデータをプルするだけでなく、サーバーに対して常に新しい要求を行うことが保証されます。

さらに、2 番目の POST 要求で、データを返そうとしています。この関数は、ページでの実行をブロックしないように、応答を返し、コールバック関数内で非同期的に処理するように設計されています。

ただし、デバッグ情報用であるというコメントがあることがわかりました。うまくいけば、これは本番環境で削除するものです。

于 2012-05-21T18:08:33.503 に答える
0

clickの を更新するhtml()と、イベント コードが失われていると思います#todo_display_table。live()代わりに試す

$('#todo_display_table input[type="submit"]').live('click', function(evt) {
于 2012-05-21T18:05:55.780 に答える
0

これは、ブラウザ キャッシングの典型的なケースです。少し前に同じ効果を経験しました。1 つの方法は、すべての投稿を次のように呼び出すことです。

$.post("./daily_todo_change_todo_status.php?id=" + (count++), parameters);

PHP スクリプト内では、id コンポーネントを無視してください。このようにすることで、ブラウザは毎回新しい文字列を生成し、キャッシュされた古いページを呼び出していたとは認識しなくなります。

それが役に立てば幸いです:)乾杯！

于 2012-05-21T18:06:53.233 に答える
0

私が見ることができるコードから、あなたのイベント処理は問題ないようです。replaceTbodyHTMLただし、が呼び出されたときにイベントが失われる可能性が最も高くなります。更新時にオンロードからコードを再度実行してみてください。例えば、

function addListeners() {
    $('#todo_display_table input[type="submit"]').click(function(evt) {
        evt.preventDefault();

        var todo_id = $(this).val();
        //document.write(todo_id);//debug
        $.when(changeTodoStatusTo(1, todo_id)).then(updateTodoDisplay);
    });
}

$(document).ready(addListeners);

そして、replaceTbodyHTML追加の最後にaddListeners();

于 2012-05-21T18:14:58.397 に答える