動態選擇器用於2次事件後奇怪的點擊事件？

Question

不知道如何最好地描述這一點，但我會盡量放在一些情況下。我對這兩種Javascript都很陌生當談到PHP時，我仍然是初學者，所以請指出你看到的任何問題 - 總是樂於學習！

隨着中說，這裏是我在做什麼

• 我已經得到了使用AJAX來更新一個div的點擊表中的基本的PHP頁面（無論是.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>'); 
});