Jquery Funktion .appendTo() funktioniert nicht

Ich mache ein textbasiertes Spiel, um meine Kenntnisse in HTML, CSS, JavaScript und jQuery zu testen. Ich versuche, die jQuery Funktion zu verwenden, um ein <p> Element an div.defaultDisplay anfügen, wenn die "Play Now!" Button wird geklickt, aber egal was ich tue, es scheint nicht zu funktionieren. Ich habe versucht, <span> statt <p> verwenden, ich .append() versucht habe, habe ich versucht, es zu dem Eingabeknopf Anhängen mit $("input[type='button']") und $("#playNow") sowohl mit .append() und .appendTo(), so dass ich weiß es wirklich nicht. Es könnte ein Fehler in der JS-Datei vorliegen oder es könnte etwas mit dem HTML-Code nicht stimmen. Alles andere wird gut angezeigt, aber die Schaltfläche macht beim Klicken nichts. Hier ist mein Code:Jquery Funktion .appendTo() funktioniert nicht

HTML (game.html):

<head> 
    <title>A Pretty Awesome Game</title> 
    <link href="game.css" rel="stylesheet" type="text/css"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="game.js"></script> 
</head> 

<body> 
    <div class="defaultDisplay"> 
     <h1>A Pretty Awesome Game</h1> 
     <input type="button" value="Play Now!" id="playNow"> 
    </div> 
</body> 
</html>

CSS (game.css):

@import url(https://fonts.googleapis.com/css?family=Spectral); 

body { 
    font-family: Spectral; 
    background-image: -webkit-linear-gradient(#FFF, #000); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

input, button { 
    font-family: Spectral; 
}

JS (game.js):

function showPartOne() { 
    $("#playNow").click(function() { 
    $("<p>test</p>").appendTo(".defaultDisplay"); 
    }); 
} 

showPartOne();

Bitte h elp!

Edit: Danke KevBot, es scheint zu funktionieren, wenn ich dein Code-Snippet ausführen, aber es funktioniert immer noch nicht auf meiner Webseite! Ich habe meinen Code in dieser Antwort auch aktualisiert.

Quelle

2017-08-29 somekid13

Nein, es scheint keine Fehler in der Konsole zu sein. – somekid13

Ich habe meine Antwort aktualisiert, um das aktuelle Problem zu reflektieren – KevBot

Setzen Sie sie in $ (Dokument).bereit (Funktion() {Ihre Codes}); – bdalina

Antwort nach Frage bearbeiten:

Ihre game.js hat JS für HTML-Suche, die noch nicht existiert (es liest und betreibt das JS vor der HTML-Lesen). Sie können diese schnell lösen, indem Ihr Skript-Tag kurz vor dem Schließkörper-Tag bewegt:

Sie sollten mit dem folgenden Ende:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>A Pretty Awesome Game</title> 
     <link href="game.css" rel="stylesheet" type="text/css"/> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    </head> 

    <body> 
     <div class="defaultDisplay"> 
      <h1>A Pretty Awesome Game</h1> 
      <input type="button" value="Play Now!" id="playNow"> 
     </div> 

     <script src="game.js"></script> 
    </body> 
</html>

Ursprüngliche Antwort:

Sie hat den Code in eine Funktion eingepackt, die nie ausgeführt wurde. Entweder setzen Sie den Code Ereignis-Listener jQuery außerhalb der Funktion, oder rufen Sie die Funktion:

function showPartOne() { 
 
    $("#playNow").click(function() { 
 
    $("<p>test</p>").appendTo(".defaultDisplay"); 
 
    }); 
 
} 
 

 
showPartOne();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="defaultDisplay"> 
 
    <h1>A Pretty Awesome Game</h1> 
 
    <input type="button" value="Play Now!" id="playNow"> 
 
</div>

Quelle

2017-08-29 15:24:32 KevBot

Es funktioniert! Danke – somekid13

Sie dies,

function showPartOne() { 
 
$("#playNow").click(function() { 
 
    $(".defaultDisplay").append("<p>test</p>"); 
 
});  
 
}

Quelle

2017-08-29 15:26:34 Punith

Wird nicht funktionieren. Siehe @KevBot Antwort –

Ihre Syntax ist absolut Datei, Es könnte nicht ausgelöst werden, da showPartOne() wird nicht aufgerufen und daher wird click event nicht bind.

Kindly call showPartOne() somewhere in the application.

Quelle

2017-08-29 15:29:07

Wie @ KevBot's Antwort. –

Eigentlich ja, ich habe meine Seite nicht aufgefrischt und gepostet, später realisiert. Ich habe dir nur einen Punkt gegeben, den du ändern musst. –

Haben Sie, OK dann .. –

Jquery Funktion .appendTo() funktioniert nicht

Antwort

Verwandte Themen