Php 表单提交USNGjQueryAjax时页面正在重新加载

我正在尝试使用jQueryAjax提交表单。我的问题是当我提交表单时，它正在提交，但我的页面正在重新加载。我尝试使用

preventDefault（）

。但我还是不明白

这是我的表单的HTML：

<form action="" method="post" id="addCategoryForm">
    <div class="form-group">
        <input type="text" class="form-control" id="new_category" name="new_category" autofocus>
    </div>
    <div class="form-group">
        <select class="form-control" name="parentCategoryList">
            <option value="">-- Parent Category --</option>
            <option value="">Lorem ipsum</option>
            <option value="">Lorem ipsdffum</option>
        </select>   
    </div>      
    <div class="form-group">
        <button class="btn btn-default" id="addCategory">Add New Category</button>
    </div>  
</form> 

当我取消注释

e.preventDefault（）时表单不可用。若我评论它，表单正在提交，但页面正在重新加载

谁能告诉我这有什么问题吗

希望有人能帮助我。提前谢谢
 您应该收听submit事件，您的元素被一个表单所包围

试试这个活动

  $('#addCategoryForm').on('submit', function(e) {
        e.preventDefault();

        //Do ajax here

  }

试试这个

<div class="form-group">
    <button type="button" class="btn btn-default" id="addCategory">Add New Category</button>
</div> 


添加新类别

请注意，我添加了
type=“button”
。这是因为，当没有提到任何类型时，默认情况下它会将其作为提交按钮。这就是页面重新加载的原因
是的，它似乎在工作。为什么它不适用于单击事件？表单仍然提交，因为您没有停止它。这是正常形式的行为
<div class="form-group">
    <button type="button" class="btn btn-default" id="addCategory">Add New Category</button>
</div>