0

我正在创建一个动态的待办事项列表。该列表从本地数据库下载并显示在表格中。每个待办事项都有一个提交按钮，您可以按下该按钮，待办事项应该在数据库中注册为“完成”。在我的代码中，这是通过一个名为 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() 函数中。Thnx 的任何帮助，并毫不犹豫地询问更多信息 =)

4

6 回答 6

3

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

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

此方法提供了一种将委托事件处理程序附加到页面的文档元素的方法，这在将内容动态添加到页面时简化了事件处理程序的使用。有关更多信息，请参阅 .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

我猜你在click更新html(). #todo_display_table试试live()吧

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

这是浏览器缓存的经典案例。不久前我也经历过同样的效果。一种方法是调用您的所有帖子：

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

在您的 php 脚本中，只需忽略 id 组件。通过这样做，浏览器每次都会生成一个新字符串，并且它不会认为它正在调用旧的缓存页面。

希望它有所帮助:) 干杯！

于 2012-05-21T18:06:53.233 回答
0

听起来您在浏览器缓存 POST 请求的响应时遇到了一些问题。这是某些浏览器的常见问题。您应该知道浏览器缓存基于 URI 的内容，而不是实际的文件。换句话说，包括查询字符串。避免缓存请求的一种解决方法是每次使用略有不同的 URI：

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

通过插入当前时间戳，您可以保证始终向服务器发出新请求，而不是浏览器只是拉取缓存数据来代替请求。

此外，在您的第二个 POST 请求中，您正尝试返回数据。此函数旨在返回响应并在回调函数中异步处理它，这样您就不会阻塞页面上的执行。

但是，我看到你有一条评论说它是用于调试信息的，所以希望这是你在生产中删除的东西。

于 2012-05-21T18:08:33.503 回答
0

从我可以看到的代码中，您的事件处理似乎很好。replaceTbodyHTML但是，当被调用时，您很可能会丢失事件。您可以在更新时再次尝试从 onload 运行代码。例如，

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 回答