Button of type submit doesn't fire in the first click

Question

Hello 

h'm working on ajax call that will call mvc5 API2,

my problem is: when i hit any of the buttons for the first type it doesn't get fierd

but for the second type it will be fiered.

 

Whats the problem...?

<form id="allowance-form">
    <div class="container">
        <div class="row">
            <div class="col-sm-3"></div>

            <div class="col-sm-6 container-box">
                <div class="allowance-box jumbotron">
                    <ul class="buttons-list" id="listOfButtons">
                        @*<li><i id="iconSave" class="glyphicon glyphicon-floppy-disk icon-small"></i>@Html.ActionLink("Save", "save", "payroll", new { @class = "button-link" })</li>*@
                        <li><button type="submit"  class="button-link js-create"><i id="iconSave" class="glyphicon glyphicon-floppy-disk icon-small"></i>Save</button></li>
                        <li><button type="submit" class="button-link js-reset"><i id="iconClear" class="glyphicon glyphicon-erase icon-small"></i>Clear</button></li>
                        <li><button type="submit" class="button-link js-delete"><i id="iconDelete" class="ion-backspace icon-small"></i>Delete</button></li>

                    </ul>
                    <div class="options-box">
                        <p class="header-after-line">Options</p>
                    </div>
                    <div class="form-box">
                        <div class="col-sm-4 inner-box">
                            <label for="txtboxCode" class="lbl-first">Code</label>
                            <input type="text" id="txtboxCode" value="@Model.Code" readonly />
                            <span class="btn-search"><i class="ion-ios-search-strong icon-small icon-search" data-toggle="modal" data-target="#lookup"></i></span>
                        </div>


                        <div class="col-sm-4 inner-box">
                            <label for="txtboxDesc">Description</label>
                            <input type="text" id="txtboxDesc" required />
                        </div>

                        <div class="col-sm-4 inner-box">
                            <label for="txtboxName">Arabic Name</label>
                            <input type="text" id="txtboxName" />
                        </div>

                        <div class="col-sm-4 inner-box">
                            <label for="txtboxMin">Minimum Value</label>
                            <input type="text" id="txtboxMin" />
                        </div>

                        <div class="col-sm-4 inner-box">
                            <label for="txtboxMax">Maximum Value</label>
                            <input type="text" id="txtboxMax" />
                        </div>

                        @*<div class="col-sm-4 inner-box">
                                <label for="txtboxMonth">Monthly Year</label>
                                <input type="text" id="txtboxMonth" />
                            </div>*@
                        @*<div class="col-sm-4 inner-box">
                                <label for="lstMonthly">Monthly Year</label>
                                <select id="lstMonthly" class="lstMontly">
                                    <option></option>
                                </select>
                            </div>*@
                        <div class="col-sm-4 inner-box">
                            <label for="txtboxMax">Monthly Yearly</label>
                            <select id="lstMonthly" class="lstMontly">
                                <option value="12">12</option>
                            </select>
                        </div>

                        <div class="chk-box">
                            <label for="Social Security">
                                Social Security
                                @*@Html.CheckBox("Social Security", false, new { @id = "chkSocial" })*@
                                <input type="checkbox" id="chkSocial" />
                            </label>
                            <label for="Vacations">
                                Vacations
                                @*@Html.CheckBox("Vacations", false, new { @id = "chkVac" })*@
                                <input type="checkbox" id="chkVac" />
                            </label>
                            <label for="Tax">
                                Tax
                                @*@Html.CheckBox("Tax", false, new { @id = "chkTax" })*@
                                <input type="checkbox" id="chkTax" />
                            </label>
                        </div>

                        <label for="????? ???????">
                            ????? ???????
                            @*@Html.CheckBox("????? ???????", false, new { @id = "chkOvertime" })*@
                            <input type="checkbox" id="chkOvertime" />
                        </label>
                        <input type="hidden" id="hiddenId"  />
                    </div>
                </div>

                <div class="col-sm-3"></div>
            </div>
        </div>
    </div>
</form>

 

 

 

 

 This is the ajax code: 

 

 

$("#allowance-form").validate({
       submitHandler: function () {

           $("#allowance-form .js-create").on("click", function (e) {
               //$("#allowance-form").submit(function (e) {

               e.preventDefault();
               var Id = $("#hiddenId").val();
               var desc = $("#txtboxDesc").val();
               var code = $("#txtboxCode").val();
               var arName = $("#txtboxName").val();
               var MinVal = $("#txtboxMin").val();
               var maxVal = $("#txtboxMax").val();
               var optionVal = $("#lstMonthly").val();
               if ($("#chkSocial").is(':checked')) { var chSocial = true; } else { var chSocial = false; }
               if ($("#chkVac").is(':checked')) { var chVac = true; } else { var chVac = false; }
               if ($("#chkTax").is(':checked')) { var chTax = true; } else { var chTax = false; }
               if ($("#chkOvertime").is(':checked')) { var chOver = true; } else { var chOver = false; }

               if (Id != "") {
                   var data = {
                       Code: code, Description: desc, MaxValue: maxVal,
                       MinValue: MinVal, MonthlyYear: optionVal, ArabicName: arName,
                       SocialSecurity: chSocial, Vacation: chVac, Tax: chTax,
                       Overtime: chOver, CreatedBy: "Test", ModifiedBy: "Test", AllowanceID: Id
                   }


                   $.ajax({
                       url: "/api/allowances/" + Id,
                       cache: false,
                       method: "PUT",
                       data: data,


                   })

                 .done(function () {
                     toastr.success("Information has been Updated successfully", "Success");
                     resetForm();
                     //table.row().remove().draw();
                     //loadAllowances();
                 })
                .fail(function () {
                    toastr.error("Somthing unexpected happend", "Error");
                    // table.row().remove().draw();

                })
               }
               else {
                   var data = {
                       Code: code, Description: desc, MaxValue: maxVal,
                       MinValue: MinVal, MonthlyYear: optionVal, ArabicName: arName,
                       SocialSecurity: chSocial, Vacation: chVac, Tax: chTax,
                       Overtime: chOver, CreatedBy: "Test", ModifiedBy: "Test"
                   }
                   $.ajax({
                       url: "/api/allowances/",
                       method: "POST",
                       data: data,
                       dataType:"json"
                   })
              .done(function (response) {
                  toastr.success("Information has been added successfully", "Success");
                  resetForm();
                  //loadAllowances();
                  //table.row().remove().draw();
              })
              .fail(function (jqXHR, status, err) {
                  var json = jqXHR.responseJSON;
                 var json2 = json["ModelState"];
                  var json3 = json2["allowances"];
                  var arr = json3[0];
                  toastr.error(arr, "Error");

              })
               }



           });

           $("#allowance-form .buttons-list .js-delete").on('click', function (e) {
               e.preventDefault();
               //var Id = $("#hiddenId").val();
               //if (Id == "") { Id = null } else { Id = Id }

               $.ajax({
                   url: "/api/allowances/" + $("#hiddenId").val(),
                   method: "DELETE",
                   cache: false,
                   success: function () {
                       toastr.success("Information has been deleted successfully", "Deleted");
                       resetForm();
                       //table.row().remove().draw();
                       // loadAllowances()
                   },
                   error: function () {
                       toastr.error("Something unexpected has been happen", "Error");
                   },
                   async: "false"

               });


           });



       }
   });