PHP和jQuery删除动态列表项

Question

I hope someone will be able to shed some light on why I am having this issue. I have created a basic list that is generated from a MySQL database using a PHP class. I am then trying to use some basic jQuery to remove a list item. I could not get it working for a long time eventually finding that if I moved the jQuery include to the end of the HTML file it works but not with it included at the top of the script as I would normally aim to do. I had thought that the jQuery document ready function should have resolved this but it is not for some reason.

Here is the jQuery (very basic as said):

$(document).ready(function(){
    $(".completeButton").click(function(){
        $(this).closest('li').remove();
    });
});

Here is the HTML page body (notice I have the jQuery include near the end rather than in the header where it does not work and remove the item, it works fine with it here though?):

<?php
session_start();
if(isset($_SESSION['user'])) {
    include "header.php";
?>
<h2>Task List</h2>
<?php
    include_once "DatabaseConn.php";
    include_once "taskList.class.php";

    $sql = "SELECT `GV_Employee`.`requests`.`req_ID` , `GV_Employee`.`equipment`.`description` , `GV_Employee`.`employees`.`first_name`, `GV_Employee`.`employees`.`last_name` 
        FROM requests
        RIGHT JOIN equipment
        ON requests.eq_ID=equipment.eq_ID
        RIGHT JOIN employees
        ON requests.emp_ID=employees.emp_ID
        ORDER BY requests.req_ID;";

    $stmt = $db->prepare($sql);
    $stmt->execute();
    $results = $stmt->fetchALL();

    foreach ($results as $row){
        $task[] = new tasklist($row);
    }
    foreach($task as $item){
        echo $item;
    }
?>
<script src="tasklist.js"></script>
<?php
}else {
    session_destroy();
    header("Location: http://dunc2/dylanr/Starters&Leavers/index.php");
    //header("Location: http://192.168.0.4/Starters&Leavers/index.php");
    exit;
}
?>

Here is the class for the dynamic list:

<?php 

class taskList {
    private $taskData;

    public function __construct($task){
        if(is_array($task))
            $this->taskData = $task;
    }

    public function __toString(){
        return '<li id="task-'.$this->taskData['req_ID'].'" class="taskList">
                <div class="text">'.$this->taskData['first_name'].' '.$this->taskData['last_name'].
                    ' requires: '.$this->taskData['description'].'</div>
                    <div id="button">
                        <a href="#" class="completeButton" onclick="completeButton();">Complete</a>
                        <a href="#" class="taskButton">Priority</a>
                    </div>
            </li>';
    }
}

?>

I hope this question makes sense, I tried searching the forum but could not find a topic which covered this exact situation apologies if there is one.

Many thanks James