I have the following form in a Bootstrap modal window

            <form id="formCsv" class="row gy-2" enctype="multipart/form-data">
              <div class="col-md-5 ">
                <input class="form-control" type="file" id="file" name="file">    
              </div>
                <div class="col-md-3">
                <button type="submit" id="csvBtn"class="btn btn-primary" name="something"> Upload </button>
              </div>
              <div id="loading" class="clearfix col-md-2">
                <div class="spinner-border text-primary float-right" role="status"></div>
              </div>
              <div class="col-md-2">
                <button type="button" id="export-btn" class="btn btn-primary" disabled>Export CSV</button>
              </div>
            </form>

JQuery file

console.log("Works");

$(document).ready( function() {
    // Submit form data via Ajax
    $("#formCsv").on('submit', function(e)
    {
        alert("test");
        e.preventDefault();
        var form_data = new FormData($(this)[0]); 

        $.ajax({
            type: 'POST',
            url: 'src/positionen/getCsvData.php',
            data: form_data,
            contentType: false,
            cache: false,
            processData:false,
            success: function(response)
            {
                console.log(response);
                var json = JSON.parse(response);                
                addToTable(json);
            },
        });
    });
});

The console.log() works. The alert() within is not triggered and no errors are thrown.

Any ideas why it is like this?

Without the form in a modal it just works fine.