Javascript 点击事件的动态选择器在2个事件后表现异常？

不确定如何最好地描述这一点，但我将尝试在一些上下文中加以说明。我对这两种Javascript都很陌生，但对于PHP，我还是一个初学者，所以请指出您看到的任何问题-始终愿意学习

话虽如此，我现在做的就是

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

问题是，如果单击.todo项目，则会使用slideUp将其删除，然后将其前置为.completed，无问题。但是，如果单击新的.completed项将其还原为.todo，则会追加一个副本，而原始项仍保留

我不太清楚该怎么办，非常感谢您的帮助

我的JS

$('#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");
            }
        }
    });

});

$（'#needToDo'）。在（“单击“，”.todo“，函数（）上）{
var itemNo=$（this.attr（“id”）；
var updateQuery=“UPDATE items SET done=1，其中itemNo=“+itemNo；
$.ajax({
类型：“POST”，
url:“toDoProcess.php”，
数据类型：“json”，
数据：{query:updateQuery，itemNo:itemNo}，
成功：函数（resultArray）{
if（resultArray！=“”）{
var itemNo=resultArray[0]['itemNo']；
var itemText=resultArray[0]['itemText']；
$（'#'+itemNo）.slideUp（函数（）{
$（'#completedItems'）。前置（''+itemText+''）；
});
}否则{
log（“此时无法完成该操作”）；
}
}
});
});
$（'#completedItems'）。在（“单击“，”.completed“，函数（）上）{
var itemNo=$（this.attr（“id”）；
控制台日志（项目编号）；
var updateQuery=“UPDATE items SET done=0，其中itemNo=“+itemNo；
$.ajax({
类型：“POST”，
url:“toDoProcess.php”，
数据类型：“json”，
数据：{query:updateQuery，itemNo:itemNo}，
成功：函数（resultArray）{
if（resultArray！=“”）{
var itemNo=resultArray[0]['itemNo']；
var itemText=resultArray[0]['itemText']；
$（'#'+itemNo）.slideUp（函数（）{
$（'#needToDo'）。追加（''+itemText+''）；
});
}否则{
log（“此时无法完成该操作”）；
}
}
});
});

我的HTML

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

待办应用
需要完成
已完成项目

问题是您正在创建具有相同id的多个元素。作为解决方案，请尝试使用

slideUp将隐藏的元素删除

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

$（'#'+itemNo）.slideUp（函数（）{
$（this.remove（））
$（'#completedItems'）。前置（''+itemText+''）；
});


$（'#'+itemNo）.slideUp（函数（）{
$（this.remove（））
$（'#needToDo'）。追加（''+itemText+''）；
});
问题是您正在创建具有相同id的多个元素。作为解决方案，请尝试使用
slideUp将隐藏的元素删除

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

$（'#'+itemNo）.slideUp（函数（）{
$（this.remove（））
$（'#completedItems'）。前置（''+itemText+''）；
});


$（'#'+itemNo）.slideUp（函数（）{
$（this.remove（））
$（'#needToDo'）。追加（''+itemText+''）；
});
我怀疑可能是这样的，但无法完全消除我的怀疑。这真是太棒了，谢谢！（在允许的情况下，将标记为已回答）。我怀疑这可能是类似的事情，但无法完全确定我的怀疑。这真是太棒了，谢谢！（如果允许，将标记为已回答）。