I'm trying to add an event listener to items that don't exit yet. I will be adding the items dynamically, but I would like them to have event listener when they are added to the DOM. I have used the .on() function but this only works for items that are on the page when it loads and not for items added dynamically. The following is my code:
$(document).ready(function () {
var $add_button = $('#add-item')
var newItem;
var $incompleteTasks = $('#incomplete-tasks');
$('button.check').on("click", function () {
alert('Helloww');
});
$add_button.click(function () {
newItem = $('#new-task').val();
//create li element and assign it to variable
var li = $('<li></li>');
var label = $('<label></label>');
var button = $('<button class="check">Check</button>');
//Use input value as the text for li item
label.text(newItem);
//append new item to incomplete tasks ul
$incompleteTasks.append(li);
li.append(label);
li.append(button);
});
});
I'm not sure where I'm going wrong here.
Thank you for the help.