javascript - 单击事件的动态选择器在 2 个事件后表现异常？

Question

不确定如何最好地描述这一点，但我会尝试放在一些上下文中。我对 Javascript 和 PHP 都是新手，所以请指出您看到的任何问题 - 总是乐于学习!

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

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

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

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

我的 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");
            }
        }
    });

});

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

Answer 1

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

隐藏元素后将其移除

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