php - AJAX/jquery 函数每次页面加载只工作一次

Question

我正在创建一个动态待办事项列表。该列表从本地数据库下载并显示在表格中。在每个待办事项处都有一个提交按钮，您可以按下该按钮，待办事项应该在数据库中注册为“完成”。在我的代码中，这是通过一个名为 status 的变量完成的，其中值为 1 表示完成，值为 0 表示未完成。

我的问题是您可以按任何按钮并且一切正常；新状态被发送到 PHP 脚本，该脚本又修改数据库中的状态值。然后网页自动更新显示表。但是，如果您在任何其他按钮上再试一次，它就不起作用了。您必须重新加载网页才能使任何其他按钮起作用。

这是我的 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 脚本，但我已经分别测试了它们，它们似乎可以工作。同样，我页面上的所有功能都工作正常，但在您单击一次后它们似乎停止工作。

我检查了数据库，状态值仅在第一次尝试(第一次单击任何按钮)时自行更新，这表明问题出在 click() 函数或 changeTodoStatusTo() 函数中.感谢您的帮助，请随时询问更多信息 =)

Answer 1

你不应该使用 jQuery 的 live 函数:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the .on() method for more information.

jQuery live documentation

如文档所述，请改用 .on() 。它的工作方式与 .live() :) 相同