在Java Script Function中编写JQuery函数的正确方法是什么

Question

我编写了一个Java脚本函数，可以在单击enterCPDetails形式的提交按钮时运行。 我想做一些检查，然后运行AJAX调用。 但它没有工作

function sumbitNewCPTabDataChk() {
   //If i comment the next line my code works
   $("#enterCPDetails").on("submit", function (event) {

    var newCPDetailsTab = document.getElementById('newCPDetailsTable');
    var newCPNoInput=document.getElementById('newCPNo');
    var newCPNoInputValue=newCPNoInput.value;
    if(newCPNoInputValue===""){
        alert("Please enter CP No.");
    }
    // LOOP THROUGH EACH ROW OF THE TABLE.
    else{
        for (row = 1; row <= newCPDetailsTab.rows.length - 1; row++) { 
            // loop through each ceel in row
            for (c = 0; c < newCPDetailsTab.rows[row].cells.length; c++) {   
                //get the cell element in variable
                var element = newCPDetailsTab.rows.item(row).cells[c];
                //check if the child element of cell is text or not. If 
   text then check if it is not empty
                if (element.childNodes[0].getAttribute('type') === 'text') 
                {
                    var valueinCell=element.childNodes[0].value ;
                    if (valueinCell === "" ) { 
                        alert("Please fill complete data in the table.");
                        exit();
                    }

                }
                else{
                    alert("asdf");
                    var rowCnt= newCPDetailsTab.rows.length; 
                    document.getElementById('cntTableRows').value=rowCnt;
                    event.preventDefault();
                    $.ajax({
                        url: "../web/addNewCPDetaills.php",
                        type: "POST",
                        data: "enterCPDetails".serialize(),
                        success: function (result) {
                        console.log(result);
                        }
                    });
                }
            }
        }
    }
});
}

如果我评论行$（“＃enterCPDetails”）。on（“submit”，function（event）{

我的功能有效。 但是这条线却没有。 为什么？

Answer 1

从我看到的，我假设你已经将一个onclick事件处理程序附加到提交按钮，该按钮调用函数sumbitNewCPTabDataChk（） 。 这不是必需的，因为基本上这就是Jquery的提交事件。

所以摆脱点击处理程序，函数sumbitNewCPTabDataChk，只需使用Jquery的提交，如：

   $("#enterCPDetails").on("submit", function(event) {

     var newCPDetailsTab = document.getElementById('newCPDetailsTable');
     var newCPNoInput = document.getElementById('newCPNo');
     var newCPNoInputValue = newCPNoInput.value;
     if (newCPNoInputValue === "") {
       alert("Please enter CP No.");
     }
     // LOOP THROUGH EACH ROW OF THE TABLE.
     else {
       for (row = 1; row <= newCPDetailsTab.rows.length - 1; row++) {
         // loop through each ceel in row
         for (c = 0; c < newCPDetailsTab.rows[row].cells.length; c++) {
           //get the cell element in variable
           var element = newCPDetailsTab.rows.item(row).cells[c];
           //check if the child element of cell is text or not. If  text then check if it is not empty
           if (element.childNodes[0].getAttribute('type') === 'text') {
             var valueinCell = element.childNodes[0].value;
             if (valueinCell === "") {
               alert("Please fill complete data in the table.");
               exit();
             }

           } else {
             alert("asdf");
             var rowCnt = newCPDetailsTab.rows.length;
             document.getElementById('cntTableRows').value = rowCnt;
             event.preventDefault();
             $.ajax({
               url: "../web/addNewCPDetaills.php",
               type: "POST",
               data: "enterCPDetails".serialize(),
               success: function(result) {
                 console.log(result);
               }
             });
           }
         }
       }
     }
   });