Javascript 419提交通过pusher显示的实时表单时

在我的应用程序中，用户可以创建一个质询，然后提交给另一个用户

示例：playerA向playerB发送挑战。PlayerB可以接受或拒绝此挑战。一旦playerA向playerB发送挑战，我将刷新网页（以playerB的身份登录），我可以看到playerA的挑战。我现在可以接受或拒绝这个挑战，一切都很好

现在，当playerA创建挑战时，我在控制器中触发一个事件，该事件将通过pusher自动向playerB显示挑战，而无需刷新页面。因此，一旦playerA向playerB发送挑战，playerB现在就可以看到此挑战，而无需刷新页面。到目前为止一切正常

现在问题开始了。如果playerB试图拒绝或接受质询（通过pusher显示），页面将重定向并显示419错误。如果playerB刷新页面，则质询可以正常拒绝或接受。只有当玩家响应通过pusher显示的挑战时，问题才会发生。如果通过页面刷新加载质询，表单将正常工作

这是我的代码中通过pusher显示拒绝挑战表单的部分：

var receivedChallengesWrapper   = $('#kt_tabs_5_3');
var receivedChallenges          = receivedChallengesWrapper.find('.kt-portlet__body');

Pusher.logToConsole = true;
var pusher = new Pusher('XXXXXXXXX', {
    authEndpoint: 'pusher/auth',
    auth: 
    {
        headers: 
           {
                'X-CSRF-Token': '{{ csrf_token() }}'
       }
    },
    cluster: 'eu',
    encrypted: false
});

var privatechannel = pusher.subscribe('private-receivedChallenges-{{ Auth::user()->id }}');

privatechannel.bind('receivedChallenges', function(data) 
{
var existingReceivedChallenges  = receivedChallenges.html();
var newReceivedChallengeHtml = 
`
    <form class="kt-form pull-right" method="POST" action=" 
    {{action('ChallengeController@declineChallenge')}}">
    <input type="hidden" name="challengeid" value="`+data.gameid+` ">
    <button class="btn btn-label-danger btn-outline-danger btn-sm btn-upper btn-submit-declinechallenge"><i class="fa fa-trash-alt"></i> decline</button>
    </form> 
`;
receivedChallenges.html(newReceivedChallengeHtml + existingReceivedChallenges);
receivedChallengesWrapper.show(); 
}

到

它正在按计划工作

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(".btn-submit-declinechallenge").click(function(e){
    e.preventDefault();

    let form = $(this).parent();
    let challengeid = jQuery('input[name="challengeid"]').val();

    $.ajax({
        type:'POST',
        url: form.attr('action'),
        data: form.serialize(),

    success:function(data){
        if(data.successful) {
            toastr.success(data.successful);
        }
        if(data.error) {
                toastr.error(data.error);
        }

        jQuery.each(data.errors, function(key, value){
            jQuery('#'+key+'-error-border-openchallenge').addClass('is-invalid')
            jQuery('#'+key+'-error-text-openchallenge').show();
            jQuery('#'+key+'-error-text-openchallenge').append('<p>'+value+'</p>');
        });
    }

    });
});

<meta name="csrf-token" content="{{ csrf_token() }}" />

$(".btn-submit-declinechallenge").click(function(e){e.preventDefault();

 $(document.body).on("click", ".btn-submit-declinechallenge", function(e){
                e.preventDefault();