Jquery関数.appendTo（）が動作しない

私は、HTML、CSS、JavaScript、jQueryに関する知識をテストするためのテキストベースのゲームを作成しています。私はdiv.defaultDisplayに<p>要素を追加するためにjQuery .appendTo()関数を使用しようとしていますが、 "Play Now！"ボタンはクリックされますが、私が何をしても、それは動作していないようです。私は<p>の代わりにを使用しようとしましたが、.append()を試しました。$("input[type='button']")と$("#playNow")と.append()と.appendTo()の両方を使用して入力ボタンに追加しようとしました。 JSファイルにエラーがあるか、HTMLコードに問題がある可能性があります。他のすべてはうまく表示されていますが、ボタンはクリックされても何もしません。ここに私のコードは次のとおりです。Jquery関数.appendTo（）が動作しない

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();

エル・P！

編集：ありがとうKevBot、コードスニペットを実行すると機能しているようですが、それでも私のウェブページでは機能しません！私はこの答えで自分のコードを更新しました。質問の編集後

出典

2017-08-29 somekid13

いいえコンソールにエラーがないようです。 – somekid13

私は現在の問題を反映するために私の答えを更新しました – KevBot

$（文書）の中に入れてください。準備完了（function（）{あなたのコード}）; – bdalina

回答：

あなたgame.js（それはHTMLを読む前にJSを読み込み、実行します）JSがまだ存在していないHTMLを探しています。あなたはすぐに終了bodyタグの前だけにスクリプトタグを移動することでこの問題を解決することができます

あなたは次で終わる必要があります。

<!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>

オリジナル回答：

をあなたは決して実行されなかった関数でコードをラップしました。関数の外jQueryのイベントリスナーのコードを入れて、あるいは単に関数を呼び出し、次のいずれか

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>

出典

2017-08-29 15:24:32 KevBot

それは動作します！ありがとう – somekid13

あなたはこの

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

出典

2017-08-29 15:26:34 Punith

動作しません。 @KevBotの回答 –

あなたの構文をチェックすることができます絶対にファイルです。showPartOne（）は、が呼び出されていないため、クリックイベントはバインドされません。

Kindly call showPartOne() somewhere in the application.

出典

2017-08-29 15:29:07

@ KevBotの答えと同じです。 –

実際にはい、私は私のページをリフレッシュせず、後で実現しました。私はちょうどあなたが変更する必要があるポイントを与えている。 –

ありがとうございました。 –

Jquery関数.appendTo（）が動作しない

答えて

関連する問題