尝试使用相同的 ajax 调用取消关注时，关注/取消关注按钮不起作用

Question

场景：页面显示动态生成的按钮（锚点），每个按钮都有一个唯一的 id 和一个公共类。使用类我在 jquery 中检索 id 并将其传递给控制器​​进行处理。虽然我可以单击关注并将其更改为关注，但我无法将其切换回关注。 它给了我“服务器响应状态为 500”。

ajax 代码

            $(document).ready(function() {
            $("body").on(
                    'click',
                    '.follow',
                    function(event) {
                        debugger;
                        event.preventDefault();
                        var cur = "#" + this.id;
                        var toFollow = {
                            "followeeID" : this.id
                        };

                        $.ajax({
                            url : "../follow/add",
                            data : toFollow,
                            dataType : 'json',
                            type : "POST",
                            success : function(data) {
                                if (data) {
                                    console.log(data);
                                    console.log(cur);
                                    $(cur).removeClass("btn-default")
                                            .addClass("btn-success");
                                    $(cur).removeClass("follow").addClass(
                                            "follow");
                                    $(cur).html("Following");
                                } else {
                                    console.log(data);
                                    $(cur).addClass("btn-default")
                                            .removeClass("btn-success");
                                    $(cur).removeClass("follow").addClass(
                                            "follow");
                                    $(cur).html("Follow");
                                }

                            }
                        })

                    });

        });

html代码

 <c:otherwise>
            <table class="table table-stripped table-hover">
                <tr>
                    <th>User Name</th>
                    <th></th>
                </tr>
                <c:forEach items="${requestScope.userlist}" var="user">
                    <c:choose>
                        <c:when test="${user.personID==sessionScope.user.personID}">
                            <tr>
                                <td>${user.username}</td>
                                <td></td>
                            </tr>
                        </c:when>
                        <c:when test="${user.followers.contains(sessionScope.user)}">
                            <tr>
                                <td>${user.username}</td>
                                <td><a class="btn btn-success unfollow" href="#"
                                    id="${user.personID}">Following</a></td>
                            </tr>
                        </c:when>
                        <c:otherwise>
                            <tr>
                                <td>${user.username}</td>
                                <td><a class="btn btn-default follow" href="#"
                                    id="${user.personID}">Follow</a></td>
                            </tr>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
            </table>
        </c:otherwise>

控制器代码

@RequestMapping(value = "/follow/add", method = RequestMethod.POST, produces = "application/json")
@ResponseBody
public boolean addFollower(HttpServletRequest request, @RequestParam String followeeID) throws Exception {
    System.out.println("reached controller");
    boolean flag = false;
    int id = Integer.parseInt(followeeID);
    HttpSession session = request.getSession();
    User follower = (User) session.getAttribute("user");
    try {
        User followee = (User) followerDao.get(id);
        if (followee.getFollowers().contains(follower)) {
            followee.getFollowers().remove(follower);
            System.out.println("removed");
            flag=followerDao.removeFollower(followee);

        } else {
            followee.getFollowers().add(follower);
            System.out.println("added");
            flag=followerDao.addFollower(followee);

        }

    } catch (FollowerException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return flag;

} 

Answer 1

$(document).ready 函数内的jQuery 代码仅适用于成功加载窗口时可用的DOM 元素，

因此，为了使其适用于动态添加的按钮，您应该使用如下事件绑定：

$(document).on(
    'click',
    '.follow',
    function(event) {
        debugger;
        event.preventDefault();
        var cur = "#" + this.id;
        var toFollow = {
            "followeeID" : this.id
        };

        $.ajax({
            url : "../follow/add",
            data : toFollow,
            dataType : 'json',
            type : "POST",
            success : function(data) {
                if (data) {
                    console.log(data);
                    console.log(cur);
                    $(cur).removeClass("btn-default")
                            .addClass("btn-success");
                    $(cur).removeClass("follow").addClass(
                            "follow");
                    $(cur).html("Following");
                } else {
                    console.log(data);
                    $(cur).addClass("btn-default")
                            .removeClass("btn-success");
                    $(cur).removeClass("follow").addClass(
                            "follow");
                    $(cur).html("Follow");
                }

            }
        })
    });
});

确保在$(document).ready函数之外使用这个jquery绑定代码