I am trying to set on change listener to some of the elements which are dynamically added but it's not working.
This is my html file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cool Maths</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/Constants/Url.js"></script>
<script src="js/Constants/AdminConstants.js"></script>
<script src="js/Create%20Level/question.js"></script>
<script src="js/Create%20Level/listener.js"></script>
<script src="js/Create%20Level/controller.js"></script>
<script src="js/Create%20Level/createLevel.js"> </script>
<link rel="stylesheet" href="css/createLevel.css" >
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header"> <a class="navbar-brand" href="index.html">Cool Maths</a> </div>
<ul class="nav navbar-nav">
<li ><a href="createModule.html">Create Module</a></li>
<li ><a href="allModules.html">All Modules</a></li>
<li class="active" ><a href="#">Create Level</a></li>
</ul>
</div>
</nav>
<div class="container">
<form >
<input type="text" id="level-name" placeholder="Level Name" class="form-control">
</form>
<br/>
<button onclick="newQuestion()" class="btn btn-primary" id="add-question-button" >Add Question</button><br/>
<br/><br/>
<div class="questions" id="all-questions-container">
</div>
</div>
</body>
</html>
This is my javascript file:
var i = 0;
$(document).ready(function(){
});
function newQuestion(){
//I am trying to set on change listener to these elements
var newQuestionHtml = "<div class='question-container'>"+"<b>Question no "+i+"</b><br/>"+
"<textarea class='form-control' type='text' id='question"+i+"' placeholder='Question'></textarea><br/>"+
"<textarea class='form-control' type='text' id='hint"+i+"' placeholder='Hint'></textarea><br/>"+
"<input class='form-control' type='text' id='answer"+i+"' placeholder='answer'><br/>"+
"<button class='btn btn-danger' onclick=''>Add Step</button></div>";
$("#all-questions-container").append(newQuestionHtml);
var question = new Question(i,"","","","");
var controller = new Controller(question);
//this line sets on change listener for the textarea with id question0 which was dynamically added
$("#answer0").on('change',function(){
alert("changed");
});
i++;
}
The elements are being added but when the value of the textarea is changed alert is not being displayed. Can anyone please tell me where I am going wrong?? Thank-you
