我的完成按鈕以某種方式轉到空白頁，除非刷新-ajax，否則刪除將不起作用

Question

我在玩我在網上學到的待辦事項清單。 嘗試將ajax添加到其中。 當我嘗試添加項目時效果很好。 添加項目后，有一個按鈕顯示“標記為完成”，因此我可以單擊它，然后會有一個“刪除”按鈕，該按鈕用於從列表和數據庫中刪除該項目。

使用ajax添加可以正常工作，但是添加后，如果單擊“標記為已完成”按鈕，則該頁面轉到done-ajax.php?as=done&item=110的網址，其中110只是數據庫中該項的ID。 我必須回到索引頁面。 當我返回索引頁面時，該項目將被標記為已完成，因為“標記為完成”有效，但不知何故，它會轉到url，而不是停留在索引頁面中。

這是我不知道在哪里尋找結果的問題之一。

另一個問題是，如果我添加項目並刷新頁面，然后單擊“標記為已完成”，它將不會轉到url，而是會顯示ajax，並且會顯示“刪除”按鈕，但有些按鈕將不起作用。 我必須刷新頁面才能使“刪除”按鈕與ajax一起使用。 我檢查了屬性並環顧了代碼，但似乎找不到導致問題的原因。

我的索引代碼如下

<div class="list">
<h1 class="header">ET's To do lists.</h1>

<?php if(!empty($items)): ?>
<ul class="items">
    <?php foreach($items as $item): ?>
    <li>
                    <span class="item<?php echo $item['done'] ? ' done' : '' ?>">
                        <?php echo $item['todoText']; ?>
                    </span>
        <?php if($item['done']): ?>
        <a href="delete-ajax.php?as=delete&item=<?php echo $item['id']; ?>" class="delete-button">Delete Task</a>
        <?php endif; ?>
        <?php if(!$item['done']): ?>
        <a href="done-ajax.php?as=done&item=<?php echo $item['id']; ?>" class="done-button">Mark as done</a>
        <?php endif; ?>
    </li>
    <?php endforeach; ?>
</ul>
<?php else: ?>
<p class="empty">You haven't added any items yet.</p>
<ul class="items"></ul>
<?php endif ?>

<form class="item-add" action="add.php" method="post">
    <input type="text" name="todoText" placeholder="Type a new item here." class="input" autocomplete="off" required>
    <input type="submit" value="Add" class="submit">
</form>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/ajax.js"></script>

我的ajax.js文件

$(document).ready(function() {

//Action when submit is clicked
$(".submit").click(function(e){
var todoText = $("input[name='todoText']").val();
e.preventDefault();

//Ajax for adding todoText
$.ajax({
method: "POST",
url: "add-ajax.php",
data: {todoText: todoText},
dataType: "json"
})
.done(function(data){
$('p.empty').empty();
$('input.input').val('');
$('ul.items').append('<li>'+todoText+' '+
    '<a href="done-ajax.php?as=done&item=' + data.id +
                '" class="done-button">Mark as Done</a></li>');
})
});

//Action when done button is clicked
$(".done-button").click(function(e){
e.preventDefault();

//making sure only work with the current element
var $clicked = $(this);

//get the href attribute value and parse it to get the item # which is the item's id
var attrValue = $clicked.attr('href');
var parseAttrValue = attrValue.split('&');
var parseItem = parseAttrValue[1].split('=');
var item = parseItem[1];

//Ajax for Mark as Done Button
$.ajax({
method: "GET",
data:{as: 'done', item: item},
url: "done-ajax.php"
})
.done(function(){
$clicked.prev().addClass('done');
$clicked.removeClass('done-button').empty();
$clicked.addClass('delete-button').text('Delete Task');
$clicked.removeAttr('href');
$clicked.attr('href','delete-ajax.php?as=delete&item='+item);
});
});

//Action when delete button is clicked
$(".delete-button").click(function(e){
e.preventDefault();

//making sure only work with the current element
var $clicked = $(this);

//get the href attribute value and parse it to get the item # which is the item's id
var attrValue = $clicked.attr('href');
var parseAttrValue = attrValue.split('&');
var parseItem = parseAttrValue[1].split('=');
var item = parseItem[1];

//Ajax for Mark as Done Button
$.ajax({
method: "GET",
data:{as: 'delete', item: item},
url: "delete-ajax.php"
})
.done(function(){
$clicked.closest('li').remove();
$clicked.remove();
});
});
});

my done-ajax.php file


<?php

require_once 'app/init.php';

if (isset($_GET['as'], $_GET['item']))
{
    $as = $_GET['as'];
    $item = $_GET['item'];

    switch ($as) {
        case 'done':
            $doneQuery = $db->prepare("
UPDATE phptodolist_items
SET done = 1
WHERE id = :item
AND user = :user
");
break;
}
}


my delete.php file

<?php

require_once 'app/init.php';

if (isset($_GET['as'], $_GET['item']))
{
    $as = $_GET['as'];
    $item = $_GET['item'];

    switch ($as) {
        case 'delete':

            $doneQuery = $db->prepare("
DELETE FROM phptodolist_items
WHERE id = :item
AND user = :user
");
break;
}
}

（順便說一句，感謝先前幫助過ajax的人很少）提前非常感謝大家：D

Answer 1

當頁面打開/ DOM准備就緒時，您正在$(document).ready()上綁定事件處理程序。 然后，您可以使用ajax添加新項目，但這些項目中的鏈接將不會綁定事件處理程序。

您可以使用事件委托來確保事件也自動綁定到新添加的項目。

您可以進行以下更改：

$(".delete-button").click(function(e){
e.preventDefault();
...

像這樣：

$(".list").on('click', '.delete-button', function(e){
  e.preventDefault();
  ...

$(".list")可以是包含新添加的元素的任何元素，並且在執行此代碼時位於頁面上。

這適用於在DOM准備好后要綁定到頁面上尚未存在的元素的所有事件處理程序。