2016-12-15 7 views
0

Ich bin endlich in der Phase des Aufbaus meiner Webseiten, und ich stecke fest. Ich bin durch zahlreiche Seiten gegangen, um zu versuchen, zu verstehen, was ich falsch mache, aber nichts hilft. Daher wende ich mich an Sie. Ich bin mir sicher, dass ich etwas mit Knochen mache, aber ich kann es nicht aufspüren.Ich kann keinen Klick von JQuery bekommen

Ich habe einen einfachen Login-Bildschirm erstellt, und ich versuche, die Senden-Schaltfläche zu erhalten, um ein Klickereignis auszulösen und mein Erfolgsmodal anzuzeigen. Wenn ich jedoch auf "Senden" klicke, passiert nichts. Es gibt auch nichts in der Konsole (Dev Tools) innerhalb von Chrome. Ich bekomme 3 Fehler in den JQuery und Bootstrap-Komponenten, aber sie machen keinen Sinn.

*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 :* 

Mein Code für meine 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

Haben Sie die 'jquery-1.11.2.min.js' irgendwo anders ?? –

+0

wie @zakaria gefragt. Gibt es andere Seiten, auf denen diese Version von jQuery funktioniert? – happymacarts

+0

Nein, die Seiten, die ich gebaut habe, insgesamt 3, keiner hat funktioniert. Also schickte ich mein einfaches von den 3, in der Hoffnung, dass es etwas Einfaches war. –

Antwort

1

Ihre jQuery ist nicht korrekt Laden der Datei oder einen wiederholten-CDN Version verwenden diese Probe arbeitet

$(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

Es ist schön zu sehen, dass es funktioniert. Ich habe versucht, die nicht-minified, aber Corporate Policy erlaubt CDNs nicht. Ich habe es erneut heruntergeladen, bin aber auf die gleichen Fehler gestoßen. –

+0

Überprüfen Sie den Pfad zu der Datei, die Sie verwenden, da sie nicht gemäß dem Fehler geladen wird msg – happymacarts

+0

Woher haben Sie die Datei heruntergeladen? versuchen Sie die von [dieser Seite] (http://jquery.com/download/) – happymacarts

1

Versuchen Sie: Entfernen Sie die Minify von Ihren Skript-Links src = "j s/jquery-2.1.3.js

+0

Dies wurde hinzugefügt, um meine Fehler zu umgehen. Seit ich eine gute Version von JQuery gefunden habe, habe ich diesen Abschnitt aus dem Code entfernt. –

Verwandte Themen