2016-12-15 6 views
0

Я, наконец, на этапе создания своих веб-страниц, и я застрял. Я просмотрел многочисленные страницы, чтобы попытаться понять, что я делаю неправильно, но ничего не помогает. Поэтому я обращаюсь к вам. Я уверен, что я делаю что-то костяное, но не могу отследить его.Невозможно получить доступ к JQuery

У меня есть простой экран входа в систему, и я пытаюсь получить кнопку отправки, чтобы запустить событие click и показать мой успех. Однако, когда я нажимаю кнопку «Отправить», ничего не происходит. Ничего не отображается на консоли (Dev Tools) в Chrome. Я получаю 3 ошибки в компонентах JQuery и Bootstrap, но они не имеют никакого смысла.

*jquery-1.11.2.min.js:1 Uncaught SyntaxError: Unexpected token :* 
*bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery 
at bootstrap.min.js:6 
(anonymous) @ bootstrap.min.js:6 
jquery-1.11.2.min.js:1 Uncaught SyntaxError: Unexpected token :* 

Мой код для моего login.html

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Login</title> 

    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <meta content="en-us" http-equiv="Content-Language" /> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Login</title> 
</head> 

<body style="padding-top:20px"> 
    <div class="col-md-10 col-md-offset-1"> 
     <div class="well"> 
      <table class="table table-bordered"> 
       <thead> 
        <tr class="success"> 
         <td colspan="2">Login</td> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>Username</td> 
         <td> 
          <input type="text" id="txtLogin"  placeholder="Username" /> 
         </td> 
        </tr> 
        <tr> 
         <td>Password</td> 
         <td> 
          <input type="password" id="txtPassword"  placeholder="Password" /> 
         </td> 
        </tr> 
        <tr class="success"> 
         <td colspan="2"> 
          <input id="btnSubmit" class="btn btn-success"  type="button" value="Submit" /> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
      <div class="modal fade" tabindex="-1" id="successModal" data- keyboard="false" data-backdrop="static"> 
       <div class="modal-dialog modal-sm"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal"> 
           &times; 
          </button> 
          <h4>Success</h4> 
         </div> 
         <div class="modal-body"> 
          <h2>Login Successful</h2> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" data-dismiss="modal" class="btn btn-success"> 
           Close 
          </button> 
         </div> 
        </div> 
       </div> 
          <button type="button" data-dismiss="modal" class="btn btn-success"> 
           Close 
          </button> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div id="divError" class="alert alert-danger collapse"> 
       <a id="linkClose" class="close" href="#">&times;</a> 
       <div id="divErrorText"></div> 
      </div> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#linkClose').click(function() { 
       $('#divError').hide('fade'); 
      }); 
      $('#btnSubmit').click(function() { 
       $('#successModal').modal('show'); 
      }); 
     }); 
    </script> 

</body> 
</html> 
+1

У вас есть 'jquery-1.11.2.min.js' где-нибудь еще? –

+0

как @zakaria спросил. есть ли другие страницы, на которых эта версия jQuery работает? – happymacarts

+0

Нет, страницы, которые я строил, всего 3, никто не работал. Поэтому я отправил свой простой из 3, надеясь, что это было что-то простое. –

ответ

1

Ваш Jquery не загружается правильно файл перезакачка или использовать версию КДС этот пример работает

$(document).ready(function() { 
 
      $('#linkClose').click(function() { 
 
       $('#divError').hide('fade'); 
 
      }); 
 
      $('#btnSubmit').click(function() { 
 
       $('#successModal').modal('show'); 
 
      }); 
 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<body style="padding-top:20px"> 
 
    <div class="col-md-10 col-md-offset-1"> 
 
     <div class="well"> 
 
      <table class="table table-bordered"> 
 
       <thead> 
 
        <tr class="success"> 
 
         <td colspan="2">Login</td> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr> 
 
         <td>Username</td> 
 
         <td> 
 
          <input type="text" id="txtLogin"  placeholder="Username" /> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>Password</td> 
 
         <td> 
 
          <input type="password" id="txtPassword"  placeholder="Password" /> 
 
         </td> 
 
        </tr> 
 
        <tr class="success"> 
 
         <td colspan="2"> 
 
          <input id="btnSubmit" class="btn btn-success"  type="button" value="Submit" /> 
 
         </td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
      <div class="modal fade" tabindex="-1" id="successModal" data- keyboard="false" data-backdrop="static"> 
 
       <div class="modal-dialog modal-sm"> 
 
        <div class="modal-content"> 
 
         <div class="modal-header"> 
 
          <button type="button" class="close" data-dismiss="modal"> 
 
           &times; 
 
          </button> 
 
          <h4>Success</h4> 
 
         </div> 
 
         <div class="modal-body"> 
 
          <h2>Login Successful</h2> 
 
         </div> 
 
         <div class="modal-footer"> 
 
          <button type="button" data-dismiss="modal" class="btn btn-success"> 
 
           Close 
 
          </button> 
 
         </div> 
 
        </div> 
 
       </div> 
 
          <button type="button" data-dismiss="modal" class="btn btn-success"> 
 
           Close 
 
          </button> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div id="divError" class="alert alert-danger collapse"> 
 
       <a id="linkClose" class="close" href="#">&times;</a> 
 
       <div id="divErrorText"></div> 
 
      </div> 
 
     </div> 
 
    </div>

+0

Приятно видеть, что это работает. Я пробовал неминифицированную, но корпоративная политика не позволяет CDN. Я сделал повторную загрузку, но столкнулся с теми же ошибками. –

+0

проверить путь к файлу, который вы используете, потому что он не загружается в соответствии с ошибкой. Msg – happymacarts

+0

где вы загрузили файл? попробуйте те из [этой страницы] (http://jquery.com/download/) – happymacarts

1

Попробуйте удалить minify из ссылок на скрипт src = "j s/jquery-2.1.3.js

+0

Это было добавлено в попытке пройти мимо моих ошибок. Поскольку я нашел хорошую версию JQuery, я удалил этот раздел из кода. –

Смежные вопросы