Question

我试图在提交位于模态内部的表单时调用Jquery函数。模态本身在另一个文件test1.php中。但是没有调用jquery函数

这是我的HTML文件：

   <!doctype html>
    <html>
        <head>
            <title>Job Entry</title>
            <link href="./css/bootstrap.min.css" rel="stylesheet"  
            type="text/css">
            <link href="./css/style.css" rel="stylesheet" type="text/css">           
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width initial-
            scale=1">
        </head>

        <body>
            <div class="col-md-2 col-md-push-1">
                       <a href="test1.php" id="addNewCP" name="addNewCP" 
                       class="form-control btn btn-success " data-toggle="modal" data-target="#addNewCPModal"  >
                           <span class="glyphicon glyphicon-plus"></span> &nbsp;Add CP</a> 
                    </div> 



            <!--Modal for addition of new CP details begins here-->
            <div class="modal fade text-center" id="addNewCPModal">
                <form method="post" id="enterCPDetails" name="enterCPDetails">
                <div class="modal-dialog ">
                    <div class="modal-content">
                     <!-- Rest of the content of this Modal lies in test1.php -->    
                    </div>
                </div>
                </form>
            </div>

            <script src="js/jquery-3.2.0.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/custom.js"></script>
            <script src="js/custom1.js"></script>
        </body>
        </html>

该模式位于单独的名为test1.php的页面中：

<div class="modal-header" style="height:55px; background-color: #122b40; color:#fff; padding:10px">
    <button type="button" class="close" style="color:white" data-dismiss="modal" aria-hidden="true"> &times; </button>
    Electronics Quality Control Division <br> Data Management System 
</div>

    <div class="modal-body"> 
        <div class="container">
            <div class="row">
                <div class="col-lg-2">
                <span class="default-textSetting" > Job No: </span>
                </div>
                <div class="col-lg-2 col-lg-offset-2">
                    <input type="text" class="form-control" placeholder="CP No" name="newCPNo" id="newCPNo" required>
                </div>
            </div>
        </div><br>    
                <table  id="newCPDetailsTable" class=" table table-stripped table-condensed table-bordered" >
                    <thead>
                        <tr>
                            <th>ICP No. </th>
                            <th>Substrate No. </th> 
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input size="16" type="text" class="form-control"  name="icp1" id="icp1" required/></td>
                            <td><input size="16"  type="text" class="form-control" name="subid1" id="subid1" required/></td>
                            <td colspan="2"><a  href="JavaScript:void(0);" onclick="addRow()" style="color:green" class="glyphicon glyphicon-plus ">&nbsp;</a>
                                            <a  href="JavaScript:void(0);"   style="color:red" class="glyphicon glyphicon-remove-circle "></a>
                            </td>

                        </tr> 

                    </tbody>
                </table>
                <input id="cntTableRows" name="cntTableRows" type="hidden" />
    </div><!--modal body ends here-->

    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close </button>    
        <button type="submit" name="newCPDetailSubmit" id="newCPDetailSubmit" class="btn btn-default" >Save</button>
    </div>

我的Jquery函数如下：

 $(function(){
        $("#enterCPDetails").on("submit", function (event) {
        alert("Hello");
       });
    });

我在做什么错。请帮助

Answer 1

尝试：

$('#addNewCPModal').on('submit','#enterCPDetails',function(){
   alert("Hello");
});

应该工作。

无法从模式窗体内部调用JQuery On Submit函数

1 个答案: