在ajax發布后重新加載div

Question

一直試圖解決這個問題，但運氣不佳

我有一個待辦事項清單，里面有一個標志和一個垃圾箱。 當您加載頁面時，我可以添加一個待辦事項，並且待辦事項會顯示在列表中，而無需刷新背面。
問題之一是，當我嘗試添加第二個項目時，它會重新加載頁面而不添加項目。 問題二是，如果在第一次標記和垃圾腳本不起作用后是否不添加其他待辦事項。

請參見下面的代碼。 我試圖能夠添加和刪除並標記待辦事項，而不必刷新頁面。

.js文件

    //To Do list flag item. Change color of text when Flag button is clicked and change back when flag button is pressed again.
$(document).ready(function() {
$( ".flag" ).click(function(e) {
    e.preventDefault();
    var id = $(this).closest(".todo-list-item").attr('id')
    var theid = ('#' + id);
    $(theid).toggleClass('todo-list-item-flagged');
     event.stopPropagation();
});
});


// Delete Task from database. This will delete the row in the database and remove the line from the page without page refresh

$(document).ready(function(){
 $(".trash").click(function(e){
       e.preventDefault();
   var id = $(this).closest(".todo-list-item").attr('id');
   var $ele = $(this).parent().parent().parent();
   $.ajax({
    type:'POST',
    url:'functions/removetask.php',
    data:{id:id},
    success: function(data){
         if(data=="YES"){
             $ele.fadeOut().remove();
         }else{
             alert("can't delete the row")
         }
    }

     });
      event.stopPropagation();
});
});

// Add task to database without page refresh


$(document).ready(function() {
        $('.btn-task').click(function (e) {
          e.preventDefault();
          $.ajax({
            type: 'POST',
            url: 'addtask.php',
            data: $('form').serialize(),
            success: function () {
                $("#todo-list").load(location.href+"  #todo-list>*","");
            }
          });

        });
});

.html文件（僅縮小至我要修復的區域）

    <div id="todos">
        <div id="todo-list" class="panel panel-blue">
            <div class="panel-heading dark-overlay"><svg class="glyph stroked clipboard-with-paper"><use xlink:href="#stroked-clipboard-with-paper"></use></svg>To-do List</div>
            <div class="panel-body">
                <ul  class="todo-list">
                 <?php
                        include'connect.php';
                        $query = $_SESSION['user'];
                        $result = mysqli_query($connection, "SELECT uname FROM tbl_users WHERE userId='$query'");
                        $name = mysqli_fetch_assoc($result);
                        $uname = $name['uname'];

                        $result = mysqli_query($connection, "SELECT * FROM tbl_todo WHERE uname='$uname'");
                        while($row = mysqli_fetch_assoc($result)){
                            ?>
                                <li id="<?php echo $row['id'];?>" class="todo-list-item"><label><?php echo $row['task']; ?></label>
                                    <div class="pull-right action-buttons">
                                        <a href="#"class="edit"><svg class="glyph stroked pencil"><use xlink:href="#stroked-pencil"></use></svg></a>
                                        <a  class="flag"><svg class="glyph stroked flag"><use xlink:href="#stroked-flag"></use></svg></a>
                                        <a id="<?php echo $row['id'];?>" class="trash"><svg class="glyph stroked trash"><use xlink:href="#stroked-trash"></use></svg></a>
                                    </div>
                                </li>

                        <?php
                        }
                    ?>
                </ul>
            </div>
            <div class="panel-footer">
            <form id="todo" method="POST" action"#">

                    <div class="input-group">
                    <input id="uname" name="uname" type="text" class="hidden form-control input-md" placeholder="Add new task" value="<?php echo userLogin('uname');?>" />
                    <input id="task" name="task" type="text" class="form-control input-md" placeholder="Add new task" />
                    <span class="input-group-btn">
                        <button name="submit" type="submit" value="submit" class="btn btn-primary btn-md btn-task" >Add</button>
                    </span>

                    </form>
                </div>
            </div>
            </div>

尚無用戶輸入的驗證。 當我知道腳本可以正常工作時，我將在其中添加內容，然后在驗證中添加內容。 非常感謝所有幫助。 我是新手，但想學習。

Answer 1

所以我找出了我要去哪里的地方。 我的整個問題是因為我使用的是動態添加的ID。 我使用選擇器的方式不正確。 現在，我將向您展示我必須更改哪些選擇器來解決所解決的問題。

1. 在嘗試添加第二個項目時重新加載整個頁面。

原始選擇器

 $('.btn-task').click(function (e)

更新的選擇器

 $('#todo-list').submit(function (e)

2. 添加項目垃圾桶腳本后將不起作用。

原始選擇器

  $(".trash").click(function(e)

更新的選擇器

 $('#todo-list').on('click','.trash', function(e)

3. 添加項目標志腳本后將不起作用。

原始選擇器

$( ".flag" ).click(function(e)

更新的選擇器

$( '#todo-list' ).on('click','a',function(e) 

我希望這個答案將來能對其他人有所幫助。 這純粹是一個新手錯誤。 我敢肯定，有經驗的人不會犯這個錯誤。

我對此的參考來自這篇文章（第5部分） Sitepoint文章