Question

我正在制作一个基于文本的游戏来测试我对HTML，CSS，JavaScript和jQuery的了解。我正在尝试使用jQuery .appendTo()函数将<p>元素附加到div.defaultDisplay当＆＃34;立即播放！＆＃34;单击按钮，但无论我做什么，它似乎都不起作用。我尝试使用<span>代替<p>，我已尝试.append()，我已尝试使用$("input[type='button']")和{{将其附加到输入按钮1}}同时包含$("#playNow")和.append()，所以我真的不知道。它可能是JS文件中的错误，或者HTML代码可能有问题。其他所有东西都显示得很好，但按钮在点击时没有做任何事情。这是我的代码：

HTML（game.html）：

.appendTo()

CSS（game.css）：

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

JS（game.js）：

@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;
}

请帮忙！

编辑：感谢KevBot，它在我运行您的代码段时似乎正常工作，但它仍然无法在我的网页上运行！我也在这个答案中更新了我的代码。

Answer 1

在问题编辑后回答：

你的game.js有JS搜索尚不存在的HTML（它在读取HTML之前读取并运行JS）。您可以通过将脚本标记移动到关闭正文标记之前快速解决此问题：

你最终应该得到以下结论：

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

Answer 2

你的语法绝对是文件，它可能没有触发，因为showPartOne（）没有被调用，因此click事件没有被绑定。

Kindly call showPartOne() somewhere in the application.

Answer 3

你能看看这个

吗？

＆＃13;

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

＆＃13;

Jquery函数.appendTo（）不起作用

3 个答案: