the issue I'm having is that the .on(click()) event works with the paragraphs generated through the dialog box, but not when they are created through the textbox entry() method. When I inspect them the IDs are correct and in the same format as the dialog-created paragraphs, but they don't work with the click event. Clicking on the dynamically created paragraphs doesn't even fire the click event at all. What do I need to do to solve this? thanks.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="main.js"></script>
</head>
<body>
<input type="text" id="txtTask" onkeydown="entry();"/>
<div id="taskBox" class="debugBox">
</div>
</body>
JS:
var tasks = [];
var content = "";
$(document).ready(function (){
for(var i = 0; i < 5; i++) {
content = prompt("Enter a task", i);
if(content != "") {
addTask(content, "yellow");
};
};
for(var i = 0; i < 5; i++) {
console.log(tasks[i].Content);
};
$( 'p' ).on( "click", function() {
console.log("clicked");
removeTask(this.id);
});
});
function entry() {
if (event.keyCode == 13) {
var ent = txtTask.value.toString();
if(ent != "") {
addTask(ent, "yellow");
};
console.log("input = " + txtTask.value);
txtTask.value='';
};
};
function addTask(content, color) {
tasks[tasks.length] = {
Content: content,
Color: color,
isActive: true
};
$('#taskBox').append('<p id="' + tasks[tasks.length - 1].Content + '">' + tasks[tasks.length - 1].Content + '</p>');
};
function removeTask(content) {
for(var i = 0; i < tasks.length; i++){
if(tasks[i].Content === content && tasks[i].isActive === true) {
tasks[i].isActive === false;
$('#' + tasks[i].Content).remove();
}
};
};
tag.
– Tyr Jan 07 '15 at 19:16