While trying to follow a tutorial, I noticed that the style sheet isn't being applied to the clicked element in the list. What could be causing this issue?
In the example provided, when a string is added to the text box and the button is clicked, a new item is added to the list. If an item in the list is clicked, it should have a strikethrough effect.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#taskText').keydown(function (evt) {
if (evt.keyCode == 13) {
addTask(this, evt);
}
});
$('#addTask').click(function (evt) {
addTask(document.getElementById('taskText'), evt);
});
// The following statements are not working
$('#tasks li').live('click', function(evt) {
$(this).addClass('done');
});});
function addTask(textBox, evt) {
evt.preventDefault();
var taskText = textBox.value;
$('<li>').text(taskText).appendTo('#tasks');
textBox.value = "";
};
</script>
<style type="text/css">
.done{
text-decoration:line-through;
}
</style>
</head>
<body>
<ul id="tasks">
</ul>
<input type="text" id="taskText" />
<input type="submit" id="addTask"/>
</body>
</html>