php - Page is reloading when form submit usng jquery ajax -

i trying submit form using jquery ajax. problem when submitting form submitting page reloading. tried using preventdefault(). still couldn't figure out.

this html form:

<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>  

this how tried using jquery:

$(document).on('click', 'button#addcategory', function (e) {         //e.preventdefault();             var data = $("form#addcategoryform").serialize();      $.ajax({         type: "post",         url: "./includes/process.php",         data: data,         cache: false,         beforesend: function() {             window.tr.animate({'backgroundcolor':'#fb6c6c'},300);         },         success: function (response) {              $('#success').html(response);             $("#success-alert").fadeto(2000, 500).slideup(1000, function(){                 $("#success-alert").alert('close');             });                      }                });      //return false;  }); 

when uncomment e.preventdefault(); form not sumbitting. if comment form submitting page reloading.

can tell me whats problem of this?

hope may me out. in advance.

you should listen submit event, elements enclosed form

try event

  $('#addcategoryform').on('submit', function(e) {         e.preventdefault();          //do ajax here    }