Question

$("#backButton-1").click(function() {
    $("#form-2").empty();
    $("#form-1").show();
});

这是我所拥有的简单代码。 form-1被隐藏，backButton-1在form-2结束后创建，并且只有在隐藏了form-1之后。我想backButton-1清空form-2并取消隐藏form-1但似乎没有发生任何事情。

这里是javascript代码（除了第一行之外的每一行都应该再缩进，我不知道为什么会这样复制）：

＆＃13;

$(document).ready(function() {
  var playersName = '';
  var gameName = '';
  var playersNameArray = [];

  $("#submit-1").click(function() {
    playersName = $("#input_players").val();
    gameName = $("#input_game").val();

    $("#form-1").hide();

    gameName = gameName.toLowerCase();
    gameName = gameName.charAt(0).toUpperCase() + gameName.substr(1);

    function makeArray(string) {
      string = string.replace(/\s/g, '');
      var array = string.split(",");

      for (let i = 0; i < array.length; i++) {
        array[i] = array[i].toLowerCase();
        array[i] = array[i].charAt(0).toUpperCase() + array[i].substr(1);
      }

      playersNameArray = array;
    }

    makeArray(playersName);

    function makeScores(array) {
      $("#container-1").prepend("<p>Input " + gameName + " scores:</p>");

      for (let i = 0; i < array.length; i++) {
        var scoreDiv = document.createElement("div");
        scoreDiv.className = "score";
        scoreDiv.id = "score-" + (i + 1);

        var scoreInput = document.createElement("input");
        $(scoreInput).attr('type', 'text');
        scoreInput.id = "scoreInput-" + (i + 1);

        $("#form-2").append(scoreDiv);
        $("#score-" + (i + 1)).append("<div class='scoreName'>" + array[i] + "</div>");
        $("#score-" + (i + 1)).append(scoreInput);
      }

      $("#container-1").append(
        $("<div class='submitButtonDiv' />").append(
          $('<input type="submit" name="submit-2" value="Submit" id="submit-2" />')
        ),
        $("<div class='backButtonDiv' />").append(
          $('<input type="button" name="backButton-1" value="Back" id="backButton-1" />')
        )
      );
    }

    makeScores(playersNameArray);
  });

  $("#backButton-1").click(function() {
    $("#form-2").empty();
    $("#form-1").show();
  });

  $("#submit-2").click(function() {

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container-1">
  <form action="/database.php" method="POST" id="form-1">
    <div class="input">
      <p>Enter player names, separated by commas:</p>
      <input type="text" name="input_players" id="input_players">
    </div>

    <div class="input">
      <p>Enter game name:</p>
      <input type="text" name="input_game" placeholder="e.g. Smallworld" id="input_game">
    </div>

    <div class="submitButtonDiv">
      <input type="submit" name="submit-1" value="Submit" id="submit-1">
    </div>
  </form>
  <form action="/database.php" method="POST" id="form-2"></form>
</div>

＆＃13;

Answer 1

您说该按钮正在创建，这意味着jQuery无法在加载时添加事件侦听器。在创建按钮的位置一起创建侦听器，或使用传播。

// Create button, add to DOM
$("<div>New div</div>").appendTo("body")
  .click(function() {
    // Attach click event listener
    alert("Works!");
  });

// Or using propagation
$("body").on("click", "#test", function() {
    alert("Works too!");
});
$("<div id='test'>New div</div>").appendTo("body");

请注意，无论您将事件侦听器附加到正文的位置，无论是在创建新项目之前还是之后，第二种方法都可以正常工作。

在你的情况下，我建议：

$("#container-1").append(
  $("<div class='submitButtonDiv' />").append(
    $('<input type="submit" name="submit-2" value="Submit" id="submit-2" />')
  ),
  $("<div class='backButtonDiv' />").append(
    $('<input type="button" name="backButton-1" value="Back" id="backButton-1" />')
  )
).on("click", "#backButton-1", function() {
  $("#form-2").empty();
  $("#form-1").show();
});

Answer 2

尝试在底部添加链接

并在脑中添加以下链接

<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> </script> <!-- <<<< This ONE--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<div id="container-1">
    <form action="/database.php" method="POST" id="form-1">
        <div class="input">
            <p>Enter player names, separated by commas:</p>
            <input type="text" name="input**strong text**_players" id="input_players">
        </div>

        <div class="input">
            <p>Enter game name:</p>
            <input type="text" name="input_game" placeholder="e.g. Smallworld" id="input_game">
        </div>

        <div class="submitButtonDiv">
            <input type="submit" name="submit-1" value="Submit" id="submit-1">
        </div>
    </form>
    <form action="/database.php" method="POST" id="form-2"></form>
</div>


<script type="text/javascript" src="main.js"></script>

</body>

.click中的功能无法运行？

2 个答案:

并在脑中添加以下链接