jQuery .click()事件点击时无法触发的问题排查

Hey there! I see exactly what's going on here—your backButton-1 and submit-2 elements are created dynamically after the initial page load, which is why the standard .click() event handler isn't working. Let me break this down and show you how to fix it.

The Root Problem #

When you run $("#backButton-1").click(function() { ... }) inside $(document).ready(), that button doesn't exist yet—it only gets added to the DOM later when the user clicks submit-1. jQuery can only bind event handlers to elements that are already present in the DOM at the time the binding code runs. So your original code is trying to attach an event to something that doesn't exist yet!

The Solution: Event Delegation #

Instead of binding the event directly to the dynamic element, you can use jQuery's .on() method to delegate the event to a parent element that does exist when the page loads (like #container-1). This way, any future elements matching the selector (like #backButton-1) will trigger the event when clicked, even if they're added later.

Modified Working Code #

Here's your updated code with the fix applied (I've added comments to highlight the changes):

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

  // --- FIXED: Use event delegation for dynamic back button ---
  $("#container-1").on("click", "#backButton-1", function() { 
    $("#form-2").empty(); 
    $("#form-1").show(); 
  }); 

  // --- FIXED: Use event delegation for dynamic submit-2 button too ---
  $("#container-1").on("click", "#submit-2", function() { 
    // Add your submit-2 logic here (e.g., collect scores and submit)
  }); 
}); 

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

Quick Tips #

• Always use event delegation for elements that are added to the DOM after page load.
• Choose the closest parent element that exists on page load (instead of document or body) for better performance—#container-1 is perfect here because it's the direct parent of your dynamic elements.
• I also fixed the submit-2 handler since that's also a dynamic element—you'll need the same approach for it to work when clicked.

内容的提问来源于stack exchange，提问作者Alex Vale