CODEWITHSUNDEEP
javascriptjqueryhtml
Lilluda 5
Lilluda 5

Reputation: 1109

jquery not working after javascript function executes

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!

Upvotes: 0

Views: 494

Answers (2)

charlietfl
charlietfl

Reputation: 171679

Not sure if you are repeatedly calling addexercises in page, or only on pageload.

If only calling it on pageload and you call it before adding click handler, all would be fine binding handler to elements.

If it will be used after page load, you need to delegate the clcik handler to higher level of html tree or document to account for future elements.

Events can only be bound diretly to elements, if the element exists when the code is run.

$(document).ready(function () {

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

});

Upvotes: 0

Ilia G
Ilia G

Reputation: 10211

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.

Upvotes: 3

Related Questions