jQuery僅在之前有JavaScript之前執行（??）。

Question

我得到一個非常奇怪的行為，我注意到jquery僅在之前有虛擬javascript時才執行。

使用jQuery腳本之前編碼的JavaScript（帶有Alerts命令）

  <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:c="http://java.sun.com/jsp/jstl/core"> <jsp:directive.page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="true" language="java" /> <jsp:output doctype-root-element="html" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" omit-xml-declaration="true" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" /> <link rel="stylesheet" type="text/css" href="/css/login.css" /> <script src="/javascript/jquery-2.2.1.min.js"></script> <script type="text/javascript"> alert('x'); </script> <script type="text/javascript"> $(document).ready(function() { $('input[name="j_username"]').focus(); $('#email input').on("invalid", function(event) { if (!$(this).val()) { this.setCustomValidity("Please fill in this field 2"); } else { this.setCustomValidity("Please enter a valid email address 2"); } }); $('#email input').on("change", function(event) { if ($(this).val()) { this.setCustomValidity(""); } }); }); </script> </head> <body> <br /> <br /> <br /> <header> <div id="header-center-11x12"> <img id="goeasyhome_logo_12x12" src="/images/goeasyhome_basic.png" alt="goeasyhome" /> </div> </header> <br /> <div id="main-content"> <form method="post" action="j_security_check"> <div id="email"> <input type="email" placeholder="Email Address" name="j_username" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[az]{2,4}" required="required" /> </div> <div id="password"> <input type="password" placeholder="Password" name="j_password" required="required" /> </div> <br /> <div id="signin"> <input type="submit" value="Sign In" /> </div> </form> <br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">Forgot Password? </a> <a class="passwdsignup-color signup-position" href="/signup.jsp">Sign Up?</a> </div>

當我提交時沒有任何數據（例如沒有電子郵件地址）時，將彈出如下所示的正確驗證消息。

用javascript（alerts命令）注釋掉。

 <head> <link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" /> <link rel="stylesheet" type="text/css" href="/css/login.css" /> <script src="/javascript/jquery-2.2.1.min.js"></script> <!-- <script type="text/javascript"> alert('x'); </script> --> <script type="text/javascript"> $(document).ready(function() { $('input[name="j_username"]').focus(); $('#email input').on("invalid", function(event) { if (!$(this).val()) { this.setCustomValidity("Please fill in this field 2"); } else { this.setCustomValidity("Please enter a valid email address 2"); } }); : :

您會注意到默認消息“請填寫此字段”而不是“請填寫此字段2”。 jquery命令未運行。

這對我來說真是不可思議。
任何幫助都會很棒。

這是jsfiddle https://jsfiddle.net/yapkm01/3f321g84/

Answer 1

將jquery引用到代碼。 我將整個頁面粘貼到了這里。 效果很好。 請告訴我。

<!DOCTYPE html>
<html>
<head>

</head>

<body>
    <div id="main-content">
        <form method="post" action="j_security_check">
            <div id="email">
                <input type="email" placeholder="Email Address" name="j_username"
                       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"
                       required="required" />
            </div>
            <div id="password">
                <input type="password" placeholder="Password" name="j_password"
                       required="required" />
            </div>
            <br />
            <div id="signin">
                <input type="submit" value="Sign In" />
            </div>
        </form>
        <br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">
            Forgot
            Password?
        </a> <a class="passwdsignup-color signup-position"
                href="/signup.jsp">Sign Up?</a>
    </div>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
    <script type="text/javascript">
        //alert('x');
        $(document).ready(function() {

            $('input[name="j_username"]').focus();
            $('#email input').on("invalid", function(event) {
                if (!$(this).val()) {
                    this.setCustomValidity("Please fill in this field 2");
                } else {
                    this.setCustomValidity("Please enter a valid email address 2");
                }
            });
            $('#email input').on("change", function(event) {
                if ($(this).val()) {
                    this.setCustomValidity("");
                }
            });
        });

    </script>
</body>
</html>

jQuery僅在之前有JavaScript之前執行（??）。

問題描述

1 個解決方案

解決方案1
1 已采納 2016-03-18 07:32:12

jQuery僅在之前有JavaScript之前執行（??）。

問題描述

1 個解決方案

解決方案1 1 已采納 2016-03-18 07:32:12

解決方案1
1 已采納 2016-03-18 07:32:12