Question

jquery文件似乎没有链接到我的html代码。 jquery文件用于验证输入并根据验证添加相应的glyphicons。我试过搜索错误，关闭标签但却找不到任何问题。任何人都可以检查并指出我正确的方向。提前谢谢。

＆＃13;

//validate.js
function validateText(id) {
  if ($("#" + id).val() == null || $("#" + id).val() == "") {
    var div = $("#" + id).closest("div");
    div.removeClass("has-success");
    $("#glypcn" + id).remove();
    div.addClass("has-error has-feedback");
    div.append('<span id="glypcn' + id + '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
    return false;
  } else {
    var div = $("#" + id).closest("div");
    div.removeClass("has-error");
    div.addClass("has-success has-feedback");
    $("#glypcn" + id).remove();
    div.append('<span id="glypcn' + id + '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
    return true;
  }
}
$(document).ready(function() {
  $("#loginbtn2").click(function() {
    if (!validateText("#USN")) {
      return false;
    }
    if (!validateText("#Password2")) {
      return false;
    }
    $("form#students_form").submit();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <link rel="icon" type="/WP Project/image/png" href="/bmsce.png">
  <title>BMS Login Page</title>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .one:hover {
      color: red;
    }
    .modal-backdrop {
      z-index: -1;
    }
    h4 {
      cursor: pointer;
    }
  </style>

</head>

<body>
  <h4 data-toggle="modal" data-target="#modal">
            LOGIN
        </h4>
  <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="Modal" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close one" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <div class="modal-title" id="ModalLabel">
            <div align="center">
              <img src="/WP Project/bmsce.png" width="150px" height="150px" />
            </div>
          </div>
        </div>
        <div class="modal-body">
          <ul class="nav nav-tabs">
            <li class="active"><a class="btn btn-danger" data-toggle="tab" href="#students">Students</a>
            </li>

          </ul>
          <br />
          <div class="tab-content">
            <div class="tab-pane active" id="students">
              <div class="well">
                <form role="form" action="" id="students_form" method="post">
                  <div class="form-group">
                    <label class="control-label" for="USN" id="students_form">Username</label>
                    <div class="input-group">
                      <input type="text" class="form-control" id="USN" placeholder="Enter USN" name="username" size=30 aria-describedby="PasswordStatus" />


                    </div>
                  </div>
                  <div class="form-group">
                    <label for="Password2">Password</label>
                    <div class="input-group">
                      <input type="password" class="form-control" id="Password2" placeholder="Password" name="password" size=30 />


                    </div>
                  </div>
                  <hr />
                  <p>
                    <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-arrow-left"></span>Back</button>
                    <button type="button" class="btn btn-primary" id="loginbtn2"><span class="glyphicon glyphicon-lock"></span>Sign in</button>
                    <br />
                  </p>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="Scripts/jquery-2.1.3.min.js"></script>
  <script src="validate.js"></script>
  <script>
    $(document).ready(function() {
      $('#modal').modal({
        backdrop: 'static',
        keyboard: false,
        show: false
      });
    });
  </script>

  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>

</html>

＆＃13;

Answer 1

您在一个HTML文件中包含了两个jQuery版本。除掉 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>来自您的DocType声明

Answer 2

您似乎在同一页面中加载了两个不同版本的jquery：

jquery-2.1.3.min.js
jquery/2.1.1/jquery.min.js

jquery文件没有链接到html文件

2 个答案: