JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    This is test case illustrates the global ajax start/stop listeners no longer getting fired. There are 3 counts shown and all stay in sync, until you press the "Bad Ajax Success". Once this button is pressed, the ajax success counts continue to increment but the others will no longer be called.
</p>
<button id="goodButton">Good Ajax Success</button>
<button id="badButton">Bad Ajax Success</button>
<h4>Ajax Success Count: <span id="ajaxSuccessRuns">0</span></h4>
<h4>Ajax Start Count: <span id="ajaxStartRuns">0</span></h4>
<h4>Ajax Stop Count: <span id="ajaxStopRuns">0</span></h4>

JavaScript

$(function() {
    $(document).ajaxStart(function() {
        var runs = parseInt($('#ajaxStartRuns').text(), 10);
        $('#ajaxStartRuns').text(++runs);
    });
    $(document).ajaxStop(function() {
        var runs = parseInt($('#ajaxStopRuns').text(), 10);
        $('#ajaxStopRuns').text(++runs);
    });
    
    $('#goodButton').bind('click', function() {
        $.ajax({
            type: 'GET',
            url: '/echo/json/',
             data: {json:{}},
             dataType:'json',
            success: function(data){
        var runs = parseInt($('#ajaxSuccessRuns').text(), 10);
        $('#ajaxSuccessRuns').text(++runs);
                }
         });
    });
    $('#badButton').bind('click', function() {
         $.ajax({
            type: 'GET',
            url: '/echo/json/',
             data: {json:{}},
             dataType:'json',
            success: function(data){
        var runs = parseInt($('#ajaxSuccessRuns').text(), 10);
        $('#ajaxSuccessRuns').text(++runs);
                var badJs = null;
                badJs.badMedthod();
            }
         });
    });
});