带有PHP SQL查询的JQuery Post

Hello SO I was wondering if someone could help me out. I have a personal TODO List PHP project that I am able to enter a task then by pressing "Enter" the task is automatically added to the list. There is a function to delete these taks and 2 tabs one to view the current tasks and one to view the archive of deleted (or completed) tasks.

As soon as I implemented the tabs my delete function stopped working. I am assuming it has something to do with where the view.task.php is being posted. Below are my jQuery functions for showing the tasks/archive and also the delete function.

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);
    });
 }

Here is my view task php script:

<?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>';
        }
    }
?>

The todo list is currently uploaded to http://derekonay.com/todo Thanks in advance for the help.

I think the problem with your code is that it's not wrapped in document ready event. to fix this, try something like this:

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