javascript - AJAX 请求后链接不起作用

Question

我正在制作的网页遇到了一个小但相当烦人的问题。因此，我有一个链接，当单击该链接时，它会向 PHP 脚本发出 AJAX 请求(如果重要的话，该链接会发送一个隐藏的输入值)。它工作正常并且按我的预期工作，但是如果我尝试再次单击该链接，它不会执行任何操作。我必须刷新页面才能使其再次工作，但我宁愿不必这样做。

链接: <a name='delete-link' href='#'>Delete</a>

JavaScript:

    $("a[name='delete-link']").click(function(e){
        e.preventDefault();
        var ID = $(this).parents("ul").find("input[name='delete-identifier']").val();

        $.ajax({
            type: 'POST', 
            url: '../ajax.php',
            data: {delete: 'true', delete_id: ID},
            success: function(response){
                $("#result").html(response).fadeIn(500).delay(5000).fadeOut(500);
                $("div[name='update']").load("test.php #update");
            }
        })
    })

#update div 中的唯一代码是这个 PHP 代码，它回显显示用户的表格:

<?php
    if ($rs){
        $user_table = "<table class='table table-bordered table-condensed table-hover table-striped'><th>Action</th>";
        $user_table .= "<tr><th>Name</th><th>Privilege ID</th></tr>";
        while ($user = $rs->fetch_array(MYSQL_ASSOC)){
            $user_table .= "<td>". $rank['RankName'] ."</td><td>". $user['PrivilegeID'] ."</td><td>";
            $user_table .= "<td><div class='btn-group'>
                                  <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>
                                    Action <span class='caret'></span>
                                  </button>
                                  <ul class='dropdown-menu' role='menu'>
                                    <input type='hidden' name='delete-identifier' value='". $user['ID'] ."'>
                                    <li><a name='delete-link' href=''>Delete</a></li>
                                  </ul>
                                </div>
                            </td><tr>";
        }
        $user_table .= "</table>";
        echo($user_table);
    }
?>

有什么想法吗？

Answer 1

在 ajax 更新 div 后，.click() 不适用于动态加载的 html。 使用.on()

$(document).on("click","a[name='delete-link']",function(e){
    e.preventDefault();
    var ID = $(this).closest("ul").find("input[name='delete-identifier']").val();

    $.ajax({
        type: 'POST', 
        url: '../ajax.php',
        data: {delete: 'true', delete_id: ID},
        success: function(response){
            $("#result").html(response).fadeIn(500).delay(5000).fadeOut(500);
            $("#update").load("test.php");
        }
    })
})

您可以使用动态内容父级的 ID 选择器来代替 $(document)，如 $('#updateDivParentId')