Jquery Event Handler when clicked not doing simple console.log

Question

Can someone please help me out with why my event handler on lines 36-37 of my code and why that is not working?

Here is my event handler here that is giving me problems which can also be found in my code below. I'm a rookie trying to learn this stuff. I think once I can get this figured out I can figure out how to use the event bubbling. Appreciate the help in advance!

$('.done-item').on('click', () => {
        console.log('This task is completed');
})

JS and Jquery

//jQuery DOM Variables
$(() => {
    const $inputBox = $('#input-box');
    const $addButton = $('#submit');
    const $things2Do = $('#to-do-list');
    const $done = $('#completed');
    

// Functions
const toDoFunction = () => {
    const $newToDo = $('<h3>').addClass('to-do-item').text($inputBox.val());
    const $completedButton = $('<button>').addClass('done-item').text('COMPLETED');
    $newToDo.append($completedButton);
    $things2Do.append($newToDo);
    resetInputBoxFunction();
    }

const resetInputBoxFunction = () => {
    $inputBox.val('');
}

const completedFunction = () => {
    
}

//Event Handlers
$addButton.on('click', toDoFunction); // add To Do item by clicking on ADD button

$($inputBox).keypress(() => {        //Event handler to add To Do's when enter button is pressed
    if(event.key === 'Enter'){
    toDoFunction();
    }
})

**//THIS EVENT HANDLER IS NOT WORKING. WHY???**
$('.done-item').on('click', () => {
    console.log('This task is completed');
})

}) // end of the onload jQuery function

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>To Do App</title>
    <!--     CSS stylesheet -->
    <link rel="stylesheet" href="main.css">
    <!--     remember, jQuery must come first -->
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    <!--     now your code -->
    <script src="app.js" charset="utf-8"></script>
  </head>
  <body>
    <div id="container">
      <h1>What to Do</h1>
      <div id="input-container">
        <!--         input and input button -->
        <label for="input-box"></label>
        <input type="text" name="" value="" id="input-box">
        <button type="button" name="button" id="submit">ADD</button>
      </div>
      <!--       Container for both lists -->
      <div id="lists">
        <!--         left list, things added should have a class of `to-do-item` to get the css -->
        <div id="to-do-list">
          <h2>Things to Do</h2>
        </div>
        <!--         right list, things added should have a class of `completed` -->
        <div id="completed">
          <h2>Things That are Done</h2>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

This is how it will work:

$(document).on('click', '.done-item', () => {
    console.log('This task is completed');
})

Jquery Event Handler when clicked not doing simple console.log

Question

1 answers

solution1
0 2020-11-23 06:04:50

Jquery Event Handler when clicked not doing simple console.log

Question

1 answers

solution1 0 2020-11-23 06:04:50

solution1
0 2020-11-23 06:04:50