jQuery .click() event isn't firing on-click

Question

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

I'm having an issue getting this snippet to run. form-1 is hidden, backButton-1 is created after the end of form-2 and only after form-1 has been hidden. I want backButton-1 to empty out form-2 and unhide form-1 but the .click event isn't firing.

Here's the code:

    $(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() {

    });
});

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

[Read how to ask a good question on STACK](https://stackoverflow.com/help/how-to-ask) — Alive to die - Anant, May 16 '18 at 11:03
`to empty out form-2` do you want to remove the form elements from the DOM with [`.empty()`](https://api.jquery.com/empty/) or reset the inputs to its default values with [`reset()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset) ? — empiric, May 16 '18 at 11:09
@empiric I want to completely empty out the form of all its elements — Alex Vale, May 16 '18 at 11:12

Bram Vanroy · Accepted Answer · 2018-05-16T11:20:03.527

2

You are saying the button is being created, which means that jQuery cannot add an event listener on load. Either create the listener together where you create the button, or use propagation.

// 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");

Note that the second approach works irrespective of where you attach the event listener to body, be it before or after creating the new item.

In your case, I suggest:

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

edited May 16 '18 at 11:20

answered May 16 '18 at 11:12

Bram Vanroy

27,032
24
137
239

This worked, thank you. I didn't include the ) before .on("click" etc., I'm assuming that was a typo. If I also wanted to remove backButton-1 itself and submit-2 could that be done with a $("#submit-2").remove(); and so on? – Alex Vale May 16 '18 at 11:33
@Alex No that is not a typo. It is a chained method. In other words: `on()` is called after `append()` is finished, on `$("#container-1")`. What it says is "if `container-1` is clicked, trickle the event down to `backButton-1` and run the function for that element". – Bram Vanroy May 16 '18 at 11:58
To remove elements you can indeed use `.remove()`. – Bram Vanroy May 16 '18 at 11:58

score -1 · Answer 2 · answered May 16 '18 at 11:37

Try adding your links at the bottom

and add the following link in your head

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

ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1 and the other one is/ajax.googleapis.com/ajax/libs/jquery/3.3.1 theyu are different and believe it or no it there is a difference sometimes — J.C. Smal, May 17 '18 at 10:28
Of course they are different, they are different version numbers. *Only* use the one that you need for your project. There are also different versions per version number, namely slim and standard. See [this post](https://stackoverflow.com/questions/35424053/what-are-the-differences-between-normal-and-slim-package-of-jquery). — Bram Vanroy, May 17 '18 at 10:55

jQuery .click() event isn't firing on-click

2 Answers2

and add the following link in your head