Question

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

我的问题是你可以按任何按钮，一切运作良好;新状态将发送到PHP脚本，而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提供任何帮助，并且不要犹豫，要求提供更多信息=）

Answer 1

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

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

此方法提供了将委托事件处理程序附加到页面的文档元素的方法，这可以在将内容动态添加到页面时简化事件处理程序的使用。有关详细信息，请参阅.on（）方法中有关直接事件与委托事件的讨论。

jQuery live documentation

如文档所述，请改用.on（）。它的工作方式与.live（）：）相同。

Answer 2

您在更新时是否重新创建提交按钮？没有看到你的所有代码就很难分辨。您是否尝试过更改此内容：

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

到此：

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

如果适用，请查看此内容：http://api.jquery.com/live/

Answer 3

当您更新click的{{1}}时，我猜您丢失了html()个事件代码。请尝试使用live()

#todo_display_table

Answer 4

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

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

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

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

Answer 5

听起来你正面临浏览器缓存POST请求响应的一些问题。这是某些浏览器的常见问题。您应该知道浏览器根据URI而不是实际文件来缓存内容。换句话说，包括查询字符串。避免缓存请求的一种解决方法是每次使用稍微不同的URI：

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

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

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

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

Answer 6

从我可以看到的代码中，您的事件处理似乎很好。但是，在调用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();

AJAX / jquery函数每页加载只能运行一次

6 个答案: