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。我使用选择器的方式不正确。我现在将向您展示我必须改变哪些选择器以解决它所解决的问题。

在尝试添加第二个项目时重新加载整个页面。

原始选择器

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

更新了选择器

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

添加项目后，废纸篓脚本无效。

原始选择器

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

更新了选择器

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

添加项目标志后，脚本无效。

原始选择器

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

更新了选择器

{{1}}

我希望这个答案可以帮助其他人。这纯粹是一个新手的错误。我相信一个更有经验的人不会犯这个错误。

我对此的参考来自本文（第5篇）Sitepoint article

ajax发布后重新加载Div

1 个答案: