单击时的 Jquery 事件处理程序不执行简单的 console.log

Question

有人可以帮我解决为什么我的代码的第 36-37 行的事件处理程序以及为什么它不起作用吗？

这是我的事件处理程序，它给我带来了问题，也可以在下面的代码中找到。 我是一个菜鸟，正在尝试学习这些东西。 我想一旦我弄清楚了这一点，我就可以弄清楚如何使用事件冒泡。 提前感谢帮助！

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

JS 和 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

这是它将如何工作：

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

单击时的 Jquery 事件处理程序不执行简单的 console.log

问题描述

1 个解决方案

解决方案1
0 2020-11-23 06:04:50

单击时的 Jquery 事件处理程序不执行简单的 console.log

问题描述

1 个解决方案

解决方案1 0 2020-11-23 06:04:50

解决方案1
0 2020-11-23 06:04:50