javascript - 将函数中的逻辑应用于最初不在 HTML 脚本中的新创建的 HTML
问题描述
我为一个跟踪日常任务的小应用程序编写了一些代码。我正在克隆id = 'active'
具有将其转移到另一列的按钮的节点。用于执行此操作的逻辑不适用于从createNewButton1
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Project Board</title>
<link rel="stylesheet" href="assets/styles/app.css" />
<script src="assets/scripts/app.js" defer></script>
</head>
<body>
<header id="main-header">
<h1>Project Planner</h1>
</header>
<div>
<section id="active">
<header>
<h2>Days</h2>
</header>
<ul>
<li
id="p4"
data-extra-info="Super important conference! Fictional but still!"
class="card"
>
<h2>Monday</h2>
</li>
</ul>
</section>
Class ProjectItem {
constructor(id, updateProjectListsFunction, type) {
this.id = id;
this.updateProjectListsHandler = updateProjectListsFunction;
this.connectMoreInfoButton();
this.connectSwitchButton(type);
this.createNewButton1();
}
createNew () {
const newItem = document.getElementById('active').querySelector('li');
const cln = newItem.cloneNode(true);
document.getElementById('active').appendChild(cln);
}
createNewButton1 () {
const addNewButton = document.getElementById('addButton');
addNewButton.addEventListener( 'click', this.createNew);
}
导致切换到另一列的按钮使用事件侦听器,这不适用于新的克隆节点。
connectSwitchButton(type) {
const projectItemElement = document.getElementById(this.id);
let switchBtn = projectItemElement.querySelector('button:last-of-type');
switchBtn = DOMHelper.clearEventListeners(switchBtn);
switchBtn.textContent = type === 'active' ? 'Finish' : 'Activate';
switchBtn.addEventListener(
'click',
this.updateProjectListsHandler.bind(null, this.id)
);
}
解决方案
您需要创建一个click
将调用moveElement
. 您还需要注意 id 以避免重复:
createNew () {
const newItem = document.getElementById('active').querySelector('li');
const cln = newItem.cloneNode(true);
cln.id = "p" + (document.querySelectorAll("#active > li").length + 1);
document.getElementById('active').appendChild(cln);
cln.addEventListener("click", function() {DOMHelper.moveElement(cln.id, "#finished-projects ul")});
}
在这里测试:https ://jsfiddle.net/gcL6e3kz/
观察:这与你问的问题无关,但是如果我在所有卡上单击完成,然后单击添加新的,那么它会失败,因为没有什么要克隆的。为此目的,最好通过模板文字创建一些模板,然后您可以使用它们而不必假设至少有一张卡片。快乐编码!
推荐阅读
- filefilter - 尝试使用 FileFilter 时出现 java.lang.NoClassDeffoundError
- python - 甲板洗牌算法不够“人性化”
- ajax - 如何将 formcollection 转换为模型 ins ASP.NET MVC
- c# - 将 IAsyncEnumerable 与 Dapper 一起使用
- flutter - 有没有办法在 Flutter 中打开抽屉后立即隐藏状态栏?
- firebase - 颤振:CachedNetworkImage 不缓存图像
- ios - 设置根视图控制器时,我可以保留模态呈现的视图控制器吗?
- javascript - 当 map 函数在代码中时,它返回 undefined,当 console.log 它返回一个空对象和一个数据。我只想要数据
- api - CQRS 和 DDD:文件上传
- button - nattable 中的按钮覆盖了我桌子的一半,有人可以解释为什么吗?