Home/ Questions/Q 8127339
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T07:29:30+00:00

I’m trying to add input boxes based on a number provided by the user.

  • 0

I’m trying to add input boxes based on a number provided by the user. Before my addexercises() is called, the jquery function works fine, however after it’s called it no longer works.

EDIT: Basically, after addexercise() executes, my jquery function no longer works when i click something of the class “textbox”. Before addexercise() executes, it works fine. I don’t understand why it is breaking.

Here is my addworkout.js file 

    $(document).ready(function () {

    $(".textbox").click (function () {
      alert('working');
});

    });


    function addexercises() {

        var numexercise = document.getElementById("numexercises");
        var totalexercise = 0 ; 
        document.getElementById("exercisesthisworkout").style.display = "none";
        if (parseInt(numexercise.value) && parseInt(numexercise.value) < 25 && totalexercise < 25) {
            totalexercise += parseInt(numexercise.value);
            for ( var i = 0; i < parseInt(numexercise.value); i++) {

                // alert("hello world");

                var subcontainer = '<div class="exercisecontainer">';
                var exercisename = '</br><input type="text" value="Enter Exercise Name" class="textbox" name="exercisename">';
                var numsets = '<br><input type="text" value="Number of Sets" class="numsets" name="numsets">';
                var endingdiv = "</div>";
                subcontainer += exercisename;
                subcontainer += numsets;
                subcontainer += endingdiv;
                document.getElementById("workoutentrycontainer").innerHTML += subcontainer;



                //document.getElementById("workoutentrycontainer").innerHTML += exercisename;

                //document.getElementById("workoutentrycontainer").innerHTML += numsets

                //document.getElementById("workoutentrycontainer").innerHTML += endingdiv;

            }

        }

    }

and my html file: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="/static/addworkout.css"  type="text/css">
<script type="text/javascript" src="/static/jquery.js"> </script>
<script type="text/javascript" src="/static/addworkout.js"></script>



</head>
{% extends "masterpage.html" %}
{% block content %}
<body>

<div id="workoutentrycontainer">
<div id="exercisesthisworkout">
<p>How many unique exercises</p>
<input type="text" class="textbox" id="numexercises"> 
<input type="button" class="button" onclick="addexercises()" value="Add" id="numexercisesbutton"> 


</div>
</div>
</body>
{% endblock %}
</html>

Thanks in advance for the help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Problem 1: This document.getElementById("workoutentrycontainer").innerHTML = ... is causing entire content of the #workoutentrycontainer to be recreated. So even those inputs that had event attached to them, will lose it.

    Problem 2: Newly created elements will not magically end up being bound to the event you defined on document load. You have to bind event handler to the closest parent that is not being recreated (#workoutentrycontainer being natural choice) and then filter it by .textbox

    $("#workoutentrycontainer").on("click", ".textbox", function() {
   alert('working');
});

    This will fix the problem 1 too, but I still recommend you use jQuery methods instead of innerHTML to append new content. This will avoid unnecessary DOM manipulation.

    • 0