使用AJAX刪除表格/數據庫項目的問題

現在我已經爲我正在處理的這個任務組織器項目提供了幾個AJAX方法 - 到目前爲止，我只有插入的工作和刪除部分工作。出於某種原因，我無法弄清楚爲什麼我無法在刷新頁面之前刪除新條目。在PHP生成的代碼（第五從而echo下降顯示了我傳遞的是與我的數據庫任務id相關的ID）：使用AJAX刪除表格/數據庫項目的問題

function generateTaskTable(){ 
    $con = mysql_connect('localhost', '-', '-'); 
    if (!$con) { 
     die('Could not connect: ' . mysql_error()); 
    } 
    mysql_select_db("tasks", $con); 
    $result = mysql_query("SELECT * FROM tasks order by taskDate ASC"); 
    echo '<table id="task_table">'; 
    while($row = mysql_fetch_array($result)) 
    { 
     $id = $row['taskID']; 
     echo '<tr id="row'.$id.'">'; 
     echo '<td>'.convertDate($row['taskDate']).'</td>'; 
     echo '<td>'.$row['hours'].'</td>'; 
     echo '<td>'.$row['task'].'</td>'; 
     echo '<td><a href=""><img src="images/trash.png" class="delete" name="'.$id.'"></a> 
     <a href=""><img src="images/delete.png" class="unsuccessful"></a> 
     <a href=""><img src="images/check.png" class="successful"></a></td>'; 
     echo '</tr>'; 
    } 
    echo '</table>'; 
    mysql_close($con); 
}

的JQuery/Ajax調用：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.delete').click(function(e){ 
      var deleteID = $(this).attr('name'); 
      var row = deleteID; 
      $.ajax({ 
       type: "POST", 
       url: "ajax.php", 
       data: "deleteID="+ deleteID, 
       success: function(result){ 
        $('#row'+row).fadeOut('fast'); 
       } 
      }); 
      e.preventDefault(); 
     }); 

     $("form#submit").submit(function(e) { 

      var day = $('#dayDD').val(); 
      var month = $('#monthDD').val(); 
      var year = $('#yearDD').val(); 
      var hours = $('#hours_text').val(); 
      var task = $('#task_text').val(); 

      $.ajax({ 
       type: "POST", 
       url: "ajax.php", 
       data: "day=" + day + "&month=" + month + "&year=" + year + "&hours=" + hours + "&task=" + task, 
       success: function(result){ 
        $('#hours_text').val(''); 
        $('#task_text').val(''); 
        $('#task_table').append(result); 
       } 
      }); 
      e.preventDefault(); 
     }); 
    }); 
</script>

阿賈克斯.php：

if(isset($_POST['deleteID'])){ 
    deleteTask($_POST['deleteID']); 
} 

if (isset($_POST['task'])&& isset($_POST['hours'])){ 
    $newID = insertTask(); 
    $month = $_POST['month']; 
    $day = $_POST['day']; 
    $year = $_POST['year']; 
    $task = $_POST['task']; 
    $hours = $_POST['hours']; 
    $day = str_pad($day, 2, "0", STR_PAD_LEFT); 

    echo'<tr id="row'.$newID.'"><td>'.$month.' '.$day.', '.$year.'</td><td>'.$hours.'</td><td>'.$task.'</td><td><a href=""><img src="images/trash.png" class="delete" name="'.$newID.'"></a><a href=""><img src="images/delete.png" class="unsuccessful"></a><a href=""><img src="images/check.png" class="successful"></a></td></tr>'; 
}

ajax.php的底部顯示了返回到AJAX調用的代碼。當我查看生成的源代碼時，它一旦添加一個新條目，新生成的ID就會正確並正確地分配給映像名稱 - 但它無法正常工作。而不是從表格和我的數據庫中刪除頁面刷新和項目不會被刪除，直到您再次單擊圖像。我還注意到圖標對齊略有偏離，我不知道爲什麼，因爲生成的源顯示與所有其他表項完全相同的格式。

刪除功能：

function deleteTask($id){ 
    $con = mysql_connect('localhost', '-', '-'); 
    if (!$con) { 
     die('Could not connect: ' . mysql_error()); 
    } 

    mysql_select_db("tasks", $con); 
    $result = mysql_query("DELETE FROM tasks WHERE taskID=$id"); 
    mysql_close($con); 
}

編輯：好吧，我想我可能知道發生了什麼與此環視其他一些堆棧溢出的職位去錯了 - 也許是我的JQuery $('.delete').click功能無法正常工作，因爲它只是運行當document.ready激發時。 PHP生成的JQuery返回並在頁面上創建另一個表元素，並且具有正確的ID標記以便被刪除，但document.ready已經使類「delete」可點擊的元素（不是新元素）成爲可能。這會有可能嗎？如果是這樣，我該如何解決這個問題？謝謝！

來源

2012-02-09 David Clark