Javascript on ("click") funktioniert nicht

Aus irgendeinem Grund funktioniert mein JS on click nicht. Ich habe die ID und Klasse markiert.Javascript on ("click") funktioniert nicht

<!DOCTYPE html> 

<head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script type='text/javascript' src="js/index.js"></script> 

    <script> 
     $(document).ready(function(){ 
     alert("Hello World"); 
     }); 
    </script> 
</head> 


<div class="container-fluid"> 
    <div class = "row text-center"> 
    <h2>Cat Photo Finder</h2> 
    </div> 
    <div class = "row text-center"> 
    <div class = "col-xs-12 well message"> 
     The message will go here 
    </div> 
    </div> 
    <div class = "row text-center"> 
    <div class = "col-xs-12"> 
     <button id = "getMessage" class = "btn btn-primary"> 
     Get Message 
     </button> 
    </div> 
    </div> 
</div>

Und hier ist das Javascript.

$(document).ready(function() { 
    // Only change code below this line. 
    $("#getMessage").on("click", function(){ 
     $(".message").html("Get message"); 
    }); 
    // Only change code above this line. 
    });

Ich würde wirklich einige Einsicht zu schätzen wissen! Vielen Dank. Meine Hypothese ist, dass die index.js-Datei nicht richtig verlinkt, aber die src ist definitiv richtig.

Quelle

2016-11-04 Mohammad Syed

Sie schließen jquery nicht ein, damit jquery nicht funktioniert. In ' 'zu Ihrem HTML. –

überprüfen Sie immer die Konsole auf Fehler. Wenn Sie jQuery nicht enthalten, erhalten Sie einen Fehler ($ ist nicht definiert) –

Wenn Sie die Funktionalität einer bestimmten Bibliothek - in diesem Fall jQuery - verwenden möchten, müssen Sie diese Bibliothek laden, bevor Sie eine ihrer Funktionen verwenden.

$(document).on("click", "#getMessage", function(){ 
 
     $(".message").html("Get message"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class = "row text-center"> 
 
    <h2>Cat Photo Finder</h2> 
 
    </div> 
 
    <div class = "row text-center"> 
 
    <div class = "col-xs-12 well message"> 
 
     The message will go here 
 
    </div> 
 
    </div> 
 
    <div class = "row text-center"> 
 
    <div class = "col-xs-12"> 
 
     <button id = "getMessage" class = "btn btn-primary"> 
 
     Get Message 
 
     </button> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-11-05 08:15:07 Flyer53

Warum verwenden Sie nicht einfach jQuery. Klick() Funktion? $ ("# getMessage"). click (function() {...}); – creekorful

Sie können entweder jQuery hinzufügen oder eine Bibliothek "ausprobieren", um alle verfügbaren CDNs zu verwenden. Wie "http: // cdnjs.com" und geben Sie jquery ein und kopieren Sie einfach das Skript in Ihre index.html – TechnoCorner

@creekorful Sie könnten '.click (handler)' natürlich verwenden, was nur eine Abkürzung für '.on ("Klick", Handler) '. Ich benutze fast immer '$ (document) .on (event, elmt, handler)' weil es auch für Elemente funktioniert, die später zum Dokument hinzugefügt werden. – Flyer53

Sie die jQuery-Script-Datei fehlen könnten. Das funktioniert perfekt für mich. erste

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
    <script> 
 
     $(document).ready(function() { 
 
      alert("Hello World"); 
 
     }); 
 

 
     $(document).ready(function() { 
 
      $("#getMessage").on("click", function() { 
 
       $(".message").html("Get message"); 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
     <div class="row text-center"> 
 
      <h2>Cat Photo Finder</h2> 
 
     </div> 
 
     <div class="row text-center"> 
 
      <div class="col-xs-12 well message"> 
 
       The message will go here 
 
      </div> 
 
     </div> 
 
     <div class="row text-center"> 
 
      <div class="col-xs-12"> 
 
       <button id="getMessage" class="btn btn-primary"> 
 
        Get Message 
 
       </button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-11-05 08:23:42 Nitheesh

$(document).ready(function() { 
 
    
 
    $("#getMessage").on("click", function(){ 
 
     alert('You Clicked..!!'); 
 
    }); 
 
    
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class = "row text-center"> 
 
    <h2>Cat Photo Finder</h2> 
 
    </div> 
 
    <div class = "row text-center"> 
 
    <div class = "col-xs-12 well message"> 
 
     The message will go here 
 
    </div> 
 
    </div> 
 
    <div class = "row text-center"> 
 
    <div class = "col-xs-12"> 
 
     <button id = "getMessage" class = "btn btn-primary"> 
 
     Get Message 
 
     </button> 
 
    </div> 
 
    </div> 
 
</div>

Du vergessen Skript zu schließen, wenn kein Sie die Skriptdatei verpassen ausrichte kann, Bitte laden.

Quelle

2016-11-05 09:06:15

Javascript on ("click") funktioniert nicht

Antwort

Verwandte Themen