动态选择器，用于点击事件在 2 个事件后行为异常

不知道如何最好地描述这一点，但我会尝试放入一些上下文。我对Javascript都很陌生，在PHP方面仍然是初学者，所以请指出您看到的任何问题 - 总是愿意学习！

话虽如此，这就是我正在做的事情

• 我有一个基本的 php 页面，它使用 AJAX 在单击div（.todo 或 .complete）时更新表格
• AJAX 返回已更新项的数组，我使用它来拉取 itemText 和 itemNo，并在div 后面附加或附加一个包含其中的信息的数组。
• 单击的 .todo 项目将向上滑动，然后添加为 .complete，单击时 .已完成的项目将恢复为 .todo。

问题是，如果我单击 .todo 项目，它会使用 slideUp 删除，然后作为 .complete 前缀，没有问题。但是，如果我随后单击新的 .done 项目以将其恢复为 .todo，则会附加一个 COPY 并保留原始内容。

我不太确定该怎么做，非常感谢任何帮助。

我的简斯

$('#needToDo').on("click", ".todo", function() {
var itemNo = $(this).attr("id");
var updateQuery = "UPDATE items SET done=1 WHERE itemNo = " + itemNo;
    $.ajax({
        type: "POST",
        url: "toDoProcess.php",
        dataType: "json",
        data: { query: updateQuery, itemNo: itemNo },
        success: function(resultArray){
            if(resultArray != ""){
                var itemNo = resultArray[0]['itemNo'];
                var itemText = resultArray[0]['itemText'];
                $('#' + itemNo).slideUp(function(){
                    $('#completedItems').prepend('<div class=''item completed'' id='''+itemNo+'''>'+itemText+'</div>');
                });
            } else {
                console.log("Could not complete that at this time");
            }
        }
    });
});
$('#completedItems').on("click", ".completed", function() {
var itemNo = $(this).attr("id");
console.log(itemNo);
var updateQuery = "UPDATE items SET done=0 WHERE itemNo = " + itemNo;
    $.ajax({
        type: "POST",
        url: "toDoProcess.php",
        dataType: "json",
        data: { query: updateQuery, itemNo: itemNo },
        success: function(resultArray){
            if(resultArray != ""){
                var itemNo = resultArray[0]['itemNo'];
                var itemText = resultArray[0]['itemText'];
                $('#' + itemNo).slideUp(function(){
                    $('#needToDo').append('<div class=''item todo'' id='''+itemNo+'''><input type="checkbox">'+itemText+'</div>');
                });
            } else {
                console.log("Could not complete that at this time");
            }
        }
    });
});

我的网页

 <div class="container">
    <h1 class="sectionTitle">To Do App</h1>
    <h2 class="sectionTitle">Need to complete</h2>
    <div id="needToDo">
        <?php
        // connect to DB
        try {
            $db = new PDO("mysql:host=localhost;dbname=toDoApp;port=3306","root","root");
            $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        } catch (Exception $e) {
            echo $e;
        }
        // Query for to-do items 
            // (where items are not marked as done & TO BE ADDED date = selected date)
        // REMEMBER TO ADD WHERE DATE = TODAY etc.
            try {
                $query = $db->query("SELECT itemNo, itemText, needShouldWant FROM items WHERE done != 1 ORDER BY itemNo DESC");
            } catch (Exception $e) {
                echo $e;
            }
        // array returned by the query
            // (assigned to result and told to use assoc keys)
            $result = $query->fetchAll(PDO::FETCH_ASSOC);
        // Each variable in the result array is assigned as item while looping through, each item returns html
            foreach($result as $item){
                $itemNo = $item['itemNo']; ?>
                <div class="item todo" id="<?php echo $itemNo ?>"><input type="checkbox" id="checkbox<?php echo $itemNo ?>"><?php echo $item['itemText'];?></div>
            <?}?>
    </div>
    <h2 class="sectionTitle">Completed Items</h2>
    <div id="completedItems">
        <?php
        // Query for to-do items 
            // (where items are not marked as done & TO BE ADDED date = selected date)
        // REMEMBER TO ADD WHERE DATE = TODAY etc.
            try {
                $query = $db->query("SELECT * FROM items WHERE done = 1 ORDER BY itemNo DESC");
            } catch (Exception $e) {
                echo $e;
            }
        // array returned by the query
            // (assigned to result and told to use assoc keys)
            $result = $query->fetchAll(PDO::FETCH_ASSOC);
        // Each variable in the result array is assigned as item while looping through, each item returns html
            foreach($result as $item){
                $itemNo = $item['itemNo']; ?>
                <div class="item completed" id="<?php echo $itemNo ?>"><?php echo $item['itemText'];?></div>
            <?}?>
    </div>

    </div>
</div>

$('#' + itemNo).slideUp(function () {
    $(this).remove()
    $('#completedItems').prepend('<div class=''item completed'' id=''' + itemNo + '''>' + itemText + '</div>');
});

$('#' + itemNo).slideUp(function () {
    $(this).remove()
    $('#needToDo').append('<div class=''item todo'' id=''' + itemNo + '''><input type="checkbox">' + itemText + '</div>');
});