model view controller - jquery not firing from modal -

the issue: form not submit.

(inside index sits directly inside layout)

<!-- modal --> <div id="modalcategory" class="modal fade" role="dialog">     <div class="modal-dialog">         <!-- modal content-->         <div class="modal-content">                 <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">&times;</button>                 <h4 class="modal-title"></h4>             </div>              <form class="form-horizontal" id="frmcategory" name="frmcategory">                 <div class="modal-body">                     <div class="form-group">                         <label class="control-label col-lg-4">category name</label>                         <input type="text" class="form-control" id="txtname" required />                     </div>                      <div class="form-group">                         <label class="control-label col-lg-4">category description</label>                         <textarea class="form-control" id="txtdescription" cols="22"></textarea>                     </div>                 </div>                 <div class="modal-footer">                     <input type="submit" id="categorysubmit" class="btn btn-info" data-dismiss="modal" value="ok" />                 </div>             </form>             </div>         </div> </div>  @section scripts{             <script type="text/javascript" src="~/viewscripts/admin/storeadmin.js"></script>     } 

updated js based on suggestions:

$("body").on("submit", "#frmcategory", function () {     //do stuff here     alert('foo1'); });  $("#modalcategory").on("submit", "#frmcategory", function () {     alert("foo2"); });  $(function () {         loadactivetab();      function loadactivetab() {             var activetab = $("#storenav > li[class='active'] > a");         loadtabdata(activetab);         }      function loadtabdata(container)     {         var hrefval = $(container).attr("href");         var $detaildiv = $(hrefval);         var url = $(container).data('url');          $detaildiv.empty();          $.get(url, function (data) {             $detaildiv.append(data);         });     }      $(".btnstoreadmin").on("click", function (evt) {             loadtabdata(this)         });      //product categories     $("#btnaddnew").on("click", function () {             clearmodal();         $(".modal-title").append("<div class='h3'>add product category</div>");         });      function clearmodal() {         $(".modal-title").empty();         $('#frmcategory')[0].reset();     }      function buildmodal(modalid) {      }      $("#frmcategory").submit(function () {             var data = {                 name: $("#txtname").val(),             description: $("txtdescription").val()             };          $.ajax({             url: '/admin/addproductcategory',             type: "post",             data: data,             success: function (data, textstatus, jqxhr) {                 clearmodal();                 $("#modalcategory").toggle();             },             error: function (jqxhr, textstatus, errorthrown) {              }         });         });      $("body").on("submit", "#frmcategory", function () {         //do stuff here         alert('foo3');     });      $("#modalcategory").on("submit", "#frmcategory", function () {         alert("foo4");     }); }); 

things i've tried

1. moving modal partial index page hosts partial
2. $("#frmcategory").on("submit", function()(){});
3. $("#categorysubmit").on("click", function()(){});
4. $(document).on("submit", "#frmcategory", function(){});
5. all variations inside , outside ready function
6. moved jquery bundles bottom top of page.
7. used both name, id , both attributes on form

thanks

remove data-dismiss="modal" submit button , catch event this

$('body').on('submit', '#frmcategory',function () {     //do stuff here });