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