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元素，但仅在所单击的元素与过滤器表达式匹配时才运行该处理程序。这称为事件委托，这是一个重要的概念。阅读here。

jQuery单击第二次不起作用单击

1 个答案: