无法在模态中获取序列化数据

Question

我有一些这样的模态：

       <div id="categoryModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <form id="categoryForm" class="form-horizontal" data-toggle="validator">
            {{ csrf_field() }}
            {{ method_field('POST') }}
            <div class="modal-body">

                <input type="hidden" name="id" id="id">

                <div class="box-body">
                    <div class="form-group">
                        <label for="name" class="col-md-3 control-label">Category</label>

                        <div class="col-md-6">
                            <input class="form-control" id="name" name="name" placeholder="Category name" required autofocus>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <label for="slug" class="col-md-3 control-label">Slug</label>

                        <div class="col-md-6">
                            <input class="form-control" id="slug" name="slug" placeholder="Category slug" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <label for="description" class="col-md-3 control-label">Description</label>

                        <div class="col-md-6">
                            <textarea class="form-control" id="description" name="description" rows="5"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
        </form>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

我尝试运行一个ajax，所以我尝试在按下提交按钮时捕获事件，所以我喜欢这样：

       $('#categoryForm form').validator().on('submit', function( event ) {
            alert('all ok')
       }

但似乎我无法触发此事件。相反，我必须这样做：

        $(document).validator().on('submit', function( event ) { 
            alert('all ok)
        }

谁能告诉我发生了什么？因为我尝试为我的ajax序列化数据：

if (!event.isDefaultPrevented()){
                   event.preventDefault();
                   var id = $('#id').val();
                   if (save_method === 'add') url = "{{ route('category.index') }}";
                   else url = "{{ route('category.index'). '/' }}"  +  id;
                   alert($('#categoryForm form').serialize());
                   $.ajax({
                       url: url,
                       type: 'POST',
                       data: $('#categoryForm form').serialize(),
                       success: function ( data ) {
                           $('#categoryForm form').modal('hide');
                           table.ajax.reload()
                       },
                       error: function (data ) {
                           alert('something is not right');
                       },
                       statusCode: {
                           404: function() {
                               alert( "page not found" );
                           },
                           405: function (  ) {
                               alert('Method not allowed')
                           }
                       }
                   })

它失败并且给我方法不允许。我认为这是因为我没有从序列化中获取任何数据，因为当我试图提醒它时我什么都没有。 Thank.s