Question

我通过jQuery加载功能加载页面我的问题是jQuery验证适用于第一页，但由于其他页面通过ajax加载，它不起作用。请找jsp＆amp; js文件如下。
是因为使用ajax页面加载时页面源代码不会更改。我应该使用显示/隐藏功能吗？
//Main.jsp

              <script
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
                type="text/javascript"></script>

            <script
                src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"
                type="text/javascript"></script>
            <script
                src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
                type="text/javascript"></script>
            <link rel="stylesheet"
                href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

            <link rel='stylesheet' type='text/css' href='css/styles.css' />
            <script type="text/javascript" src="js/main.js"></script>
            <script src="Jquery/myscript.js"></script>


            </head>
            <body>
                <div id="top">
                    <div id='mainMenu'>
                        <ul>
                            <li><a id="home"><span>Home</span></a></li>
                            <li><a href='#'><span>Hot Deals</span></a></li>
                            <li><a><span id="logPage">Login</span></a></li>
                            <li><a id="regPage"><span>Register</span></a></li>
                            <li><a id="usPage"><span>About</span></a></li>
                            <li class="last"><a id="adminPage"><span>Adminstration</span></a>
                        </ul>
                    </div>
                    <div id="mainPages">
                        <jsp:include page="Search.jsp"></jsp:include>
                    </div>
                    <div id="errors">
                        <s:actionerror />
                        <s:actionmessage />
                    </div>
                </div>

            </body>
            </html>
        //main.js

        $(document).ready(function() {

            $("#logPage").click(function() {

                $('#mainPages').empty();
                $('#mainPages').load('Index.jsp');
            });
            $("#regPage").click(function() {

                $('#mainPages').empty();
                $('#mainPages').load("Register.jsp");
            });
            $("#usPage").click(function() {

                $('#mainPages').empty();
                $('#mainPages').load("About.html");
            });
            $("#home").click(function() {

                $('#mainPages').empty();
                $('#mainPages').load("Search.jsp");
            });
            $("#adminPage").click(function() {

                $('#mainPages').empty();
                $('#mainPages').load("../AdminLogin.jsp");
            });

        });
    //myscript.js
    $(document).ready(function() {

        $("#myform").validate({
            rules : {
                email : {
                    required : true,
                    email : true
                },
                password : {
                    required : true,
                    minlength : 8
                },

            },
            messages : {
                email : {
                    required : "Please Enter email",
                    email : "Valid Email Please"
                }
            }
        });

        $("#regform").validate({

            rules : {
                email : {
                    required : true,
                    email : true
                },
                password : {
                    required : true,
                    minlength : 8
                },
                fname : {
                    required : true,
                    lettersonly : true
                },
                lname : {
                    lettersonly : true
                },
                mname : {
                    lettersonly : true
                },
                geneder : {
                    required : true
                },
                city : {
                    required : true
                },
                zip : {
                    required : true,
                    digits : true,
                    minlength : 6,
                    maxlength : 6
                },
                mobno : {
                    required : true,
                    digits : true,
                    minlength : 10,
                    maxlength : 10
                },
                dob : {
                    required : true
                }
            },
            messages : {
                email : {
                    required : "Please Enter email",
                    email : "Valid Email Please"
                }
            }

        });
        $("#travelDate").datepicker({
            defaultDate : '0',
            numberOfMonths : 1,
            minDate : '0',
            maxDate : '1M'
        });
        $("#searchForm").validate({

            rules : {
                fromCity : {
                    required : true,
                    lettersonly : true,

                },
                toCity : {
                    required : true,
                    lettersonly : true
                },
                seats : {
                    required : true,
                    digits : true,
                    min : 1,
                    max : 9,
                },
                travelDate : {
                    required : true,
                }
            },
            messages : {

            }
        });
    });
    )};

Answer 1

尝试

$(document.body).on('click', 'input[type="submit"]', function(){
   var $form = $(this).closest('form');
       $form.validate({

重复上述所有form

Answer 2

你的main.js很好......

尝试以下步骤：

1）将$(document).ready(function()更改为方法，然后在function validator()中致电myscript.js。

2）在您通过ajax调用加载的所有页面中使用onload=validator()。

Answer 3

动态加载的元素的存在需要由$("#someDynamicElement").live()而不是$(document).ready()来确定。如果这对你有所帮助，我在生成表单时遇到了类似的问题..

通过ajax加载页面时的jQuery验证？

3 个答案: