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

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

AJAX请求后链接无法正常工作

1 个答案: