javascript - 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 返回的新内容覆盖原始按钮。因此，您绑定(bind)点击的按钮元素也消失了，取而代之的是来自服务器的新的 HTML 部分。

我建议您执行以下操作。替换:

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

与:

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

这实际上将处理程序绑定(bind)到 #follow 元素，但仅当单击的元素与过滤器表达式匹配时才运行它。这称为事件委托(delegate)，这是一个重要的概念。了解它 here .