Ajax 成功函数第二次不起作用

Ajax success function doesn't work second time

本文关键字：不起作用 第二次 函数 成功 Ajax      更新时间：2023-09-26
我用AJAX提交了一个

表单，第一次提交时，它具有成功功能，但是第二次它以accept_friend.php而不是#requests_container打印成功数据，就像普通的PHP表单一样。

$('.accept_friend').submit(function(){
    var data = $(this).serialize();
    $.ajax({
        url: "../accept_friend.php",
        type: "POST",
        data: data,
        success: function( data )
        {   
            $('#requests_container').html(data);
        },
        error: function(){
            alert('ERROR');
        }
    });
    return false;
});

这是accept_friend.php

<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
require "classes/class.requests.php";
require "classes/db_config.php";
$current_user = $_POST['current_user'];
$friend_id = $_POST['friends_id'];
$requests = new Requests($DB_con);
if($_SERVER["REQUEST_METHOD"] == "POST"){
     $requests->accept($current_user, $friend_id);
}
?>

似乎您正在替换$('#requests_container')中的整个html，我假设.accept_friend按钮也在同一个容器内。

如果是这种情况，请尝试将您的代码替换为 

$('#requests_container').on('submit', '.accept_friend', function(){
    var data = $(this).serialize();
    $.ajax({
        url: "../accept_friend.php",
        type: "POST",
        data: data,
        success: function( data )
        {   
            $('#requests_container').html(data);
        },
        error: function(){
            alert('ERROR');
        }
    });
    return false;
});

这将使您的事件保持活动状态，即使在删除表单按钮并将其放回 DOM 中后也是如此

我已经测试过了，它确实对我有用(火狐(

破坏表单后，将提交事件重新绑定到提交者函数

$('.accept_friend').submit(function submitter() {
    var data = $(this).serialize();
    $.ajax({
        url: "../accept_friend.php",
        type: "POST",
        data: data,
        success: function(data) {   
            $('#requests_container').html(data);
            setTimeout(function() { // may not be needed
                $('.accept_friend').submit(submitter); // rebind submit
            }, 0);
        },
        error: function(){
            alert('ERROR');
        }
    });
    return false;
});
相关文章：