jQuery单击第二次不起作用

Question

我正在使用以下代码发送ajax，但问题是，当用户第二次单击按钮时，它不发布到后端或不提交数据，要使其再次起作用，用户需要再次重新加载页面。 有人知道为什么吗？

$(document).ready(function () {
    $('#btn_follow').click(function (e) {
        e.preventDefault();
        //e.stopPropagation();
        //$('#divId :input').serialize();
        var follow_and_unfollow = $("#user_page_follow :input").serialize();
        $.post(
            "backend/ajax/follow_and_unfollow.php",
            follow_and_unfollow
        ).done(function (data) {

            //$("#testimonials").load(location.href+" #testimonials>*","");
            $("#follow").html(data);
            $("#user_followers").load(location.href + " #user_followers>*", "");

        }).fail(function () {
            //alert("Error submitting forms!");
        });
    });
});

在第二次单击#btn_follow它没有提交，用户需要重新加载页面才能正常工作

Answer 1

正如我们在评论中确认的那样，您正在用通过AJAX返回的新内容覆盖原始按钮。 这样，绑定了单击的按钮元素也消失了，取而代之的是服务器中的HTML。

我建议您执行以下操作。 更换：

$('#btn_follow').click(function (e) {

附：

$('#follow').on('click', '#btn_follow', function (e) {

这实际上将处理程序绑定到#follow元素，但仅在所单击的元素与过滤器表达式匹配时才运行该处理程序。 这称为事件委托，这是一个重要的概念。 在这里阅读。