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元素，但僅在所單擊的元素與過濾器表達式匹配時才運行該處理程序。 這稱為事件委托，這是一個重要的概念。 在這里閱讀。