带有 PHP SQL 查询的 JQuery Post

Question

你好所以我想知道是否有人可以帮助我。我有一个个人 TODO List PHP 项目，我可以输入一个任务，然后按“Enter”，任务会自动添加到列表中。有一个功能可以删除这些任务和 2 个选项卡，一个用于查看当前任务，一个用于查看已删除（或已完成）任务的存档。

一旦我实现了选项卡，我的删除功能就停止了工作。我假设它与 view.task.php 的发布位置有关。下面是我的 jQuery 函数，用于显示任务/存档以及删除函数。

function delete_task() {
    $.get('includes/view-task.php'); 

    $('.delete-button').click( function(){

        var current_element = $(this);
        var id = $(this).attr('id');

        $.post('includes/delete-task.php', { task_id: id }, function() {
            current_element.parent().fadeOut("fast", function() { $(this).remove(); });
            alert('it worked');
        });
    });
}

function show_tasks() {
    $('.task-button').click(function(){
        var current_element = $(this);
        var id = $(this).attr('id');       

        $.post('includes/view-task.php' , function(task) {
            $(task).appendTo('.todo-list ul').hide().fadeIn(); 
        });

        $('.archive-item').fadeOut("slow", function() { $('.archive-item').remove(); });
        $('.task-button').attr('disabled','disabled');     
        $('.archive-button').attr('disabled',false);
    });
 }

这是我的视图任务 php 脚本：

<?php
    require("connect.php");
    $query = mysql_query("SELECT * FROM tasks ORDER BY date ASC, time ASC");
    $numrows = mysql_num_rows($query);

    if($numrows>0){
        while( $row = mysql_fetch_assoc( $query ) ){

            $task_id = $row['id'];
            $task_name = $row['task'];

            echo '<li class="task-item">
                        <span>'.$task_name.'</span>
                <img id="'.$task_id.'" class="delete-button" width="10px" src="images/close.svg" />
              </li>';
        }
    }
?>

待办事项列表目前已上传至http://derekonay.com/todo提前感谢您的帮助。

Answer 1

我认为您的代码的问题在于它没有包含在文档就绪事件中。要解决此问题，请尝试以下操作：

<script type="text/javascript">

$(document).ready(function()
{
    $.get('includes/view-task.php'); 

    $('.delete-button').click( function(){

        var current_element = $(this);
        var id = $(this).attr('id');

        $.post('includes/delete-task.php', { task_id: id }, function() {
            current_element.parent().fadeOut("fast", function() { $(this).remove(); });
            alert('it worked');
        });
    });

    $('.task-button').click(function(){
        var current_element = $(this);
        var id = $(this).attr('id');       

        $.post('includes/view-task.php' , function(task) {
            $(task).appendTo('.todo-list ul').hide().fadeIn(); 
        });

        $('.archive-item').fadeOut("slow", function() { $('.archive-item').remove(); });
        $('.task-button').attr('disabled','disabled');     
        $('.archive-button').attr('disabled',false);
    });

});

</script>