How to call ajax again after first ajax success call

Question

Using this Ajax call:

$(".view-ticket").click(function(e) {            
    e.preventDefault(); 
    var ticket_id = $(this).data("ticket-id");
    var nonce = $(this).data("nonce");
    var actionUrl = eng.ajaxurl;
    var data = 'ticket_id=' + ticket_id + '&action=' + 'ticket_view_action&nonce='+nonce;
    
    $.ajax({
        // dataType : "json",
        type: "POST",
        url: actionUrl,
        data: data,
        beforeSend : function() {
            $(".show-ticket").html( 'Please wait...' );
        },
        success: function(data) {
            e.preventDefault(); 
            $(".show-ticket").html( data );
        }
    });
});

I get this HTML form:

echo "<form action='' method='POST' id='ticket-reply-form'>";
    echo "<textarea name='ticket_reply'></textarea>";
    echo "<input type='hidden' name='ticket_id' value='". $post->ID."'>";
    wp_nonce_field( 'ticket_reply_action', 'ticket_reply_nonce' );
    echo "<br/>";
    echo "<input type='submit' class='btn btn-submit' name='submit' value='Send Reply'/>";
echo "</form>";

Now, I want to submit his form using the jQuery Ajax call:

$("#ticket-reply-form").submit(function(e) {
            
    e.preventDefault(); 

    var form = $(this);
    var actionUrl = eng.ajaxurl;
    var data = form.serialize() + '&action=' + 'ticket_reply_action';
    
    $.ajax({
        dataType : "json",
        type: "POST",
        url: actionUrl,
        data: data,
        beforeSend : function() {
            $(".reply-form-message").html( 'Please wait...' );
        },
        success: function(data) {
            $(".reply-form-message").html( '' );
            if( ! data.success ) {
                data.errors.forEach( function( item, index ) {
                    $(".reply-form-message").append( 
                        "<div class='message-box'><div class='icon-main'><span class='flaticon-close'></span></div><div class='content-box'>"+ item +"</div></div>"
                    );
                });
            } else {
                $(".reply-form-message").append( 
                    "<div class='message-box'><div class='icon-main success-bg'><span class='flaticon-correct'></span></div><div class='content-box'>"+ data.message +"</div></div>"
                );
                $("#ticket-reply-form").closest('form').find("textarea").val("");
            }   
        }
    });
});

but why the page is loading instead of calling the ajax?