JQuery submit () vc click () в модальной форме

У меня есть форма внутри Bootstrap Modal, 2 текстовых ввода и кнопка отправки. Я хочу отправить данные формы в контроллер Laravel без обновления текущей страницы (где отображается Modal).

Сначала я использовал функцию jQuery click (), и она сделала то, что я ожидал (отправленные данные, выполнение контроллера, возврат JSON и оценка JSON с правилами успеха / ошибки и без обновления).

Когда я изменил код на функцию jQuery submit (), данные были отправлены, контроллер выполнил их, вернул JSON, НО теперь браузер показывает простой текст JSON. Код внутри успеха / ошибки не был выполнен.

Почему происходит такое разное поведение между этими двумя функциями?

JS - с помощью click ():

$(document).ready(function(){
        $('button#ajaxSubmit').click(function(e){


        e.preventDefault();

        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name = "_token"]').attr('content')
            }
        });
        jQuery.ajax({
            url: "{{ url('/question') }}",
            method: 'POST',
            data: $('#form_pergunta').serialize(),
            success: function(result){
                $('#form_pergunta')[0].reset();
                $('#myModal_Pergunte').modal('hide');
                msgbox_Text = "Sua pergunta foi incluída com sucesso!" ;
                $("#msgbox_alertmsg").append(msgbox_Text);
                $('#myModal_MsgBox').modal('show');
            },
            error: function (data, textStatus, errorThrown) {
                console.info(data);
            },
        });
    });
});

JS - с submit ():

то же самое выше, но изменить

 $('button#ajaxSubmit').click(function(e)  

к

$('#form_pergunta').submit(function(e)

HTML

    <div class = "modal fade bd-example-modal-lg" id = "myModal_Pergunte" tabindex = "-1" role = "dialog" >
  <div class = "modal-dialog modal-lg">

     <!-- Modal content-->
     <div class = "modal-content">
        <div class = "modal-header">
           <h5 class = "modal-title">Title</h5>
           <button type = "button" class = "close" data-dismiss = "modal">X</button>
       </div>
       <div class = "modal-body">

        <form method = "POST"  action = "{{ url('/question')}}" id = "form_pergunta">
            {{ csrf_field() }}

            <div class = "form-group">
             <label for = "formGroupTextArea">What is your question? </label>
             <textarea type = "text" class = "form-control" id = "formGroupTextArea" placeholder = "Faça sua pergunta utilizando até 250 caracteres." rows = "8" maxlength = "250" name = "form_question" required></textarea>
             <h6 class = "float-right pt-1 text-muted" id = "count_message"></h6>

         </div>
         <div class = "form-group">
             <label for = "formGroupInputUrl">Link opcional</label>
             <input type = "text" class = "form-control" id = "formGroupInputUrl" placeholder = "Caso deseje, inclua um link que faça referência a pergunta" name = "form_url" maxlength = "250">
         </div>
     </div> 
     <div class = "modal-footer">
         <input type = "submit" class = "btn btn-primary" name = "btn_submit" id = "ajaxSubmit" >Submit</button>
     </div>

     </form>
</div>
</div>
</div>