单击Jquery不执行简单console.log
单击Jquery不执行简单console.log
提问于 2020-11-23 04:59:10
有人能帮我弄清楚为什么我的代码第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<!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>回答 1
Stack Overflow用户
发布于 2020-11-23 06:04:50
这就是它的工作方式：
$(document).on('click', '.done-item', () => {
console.log('This task is completed');
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64962771
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号