gpt4 book ai didi

javascript - 让事件监听器在插入的 HTML 按钮上工作

转载 作者:行者123 更新时间:2023-11-30 16:51:35 26 4
gpt4 key购买 nike

如何让我的事件监听器在插入的 HTML 上工作?

我插入 <li id="test">Titre : test<input type="button" id="del" value="X"><br>Texte : </li>在我的列表中,但我的事件监听器仅适用于名为“工作”的按钮,该按钮是在 HTML 页面中创建的。

我想调用函数 clickHandlerRem单击列表中的新按钮。

图片:

enter image description here

这是我的 HTML:

<!DOCTYPE html>
<html>
<head>
<link href="libs/css1.css" rel="stylesheet">
<script src="/script1.js"></script>
</head>
<body>
<form>
Ajouter une note
<input type="text" id="oTitleInput" placeholder="Entrez un titre" />
<input type="button" id="bdel" value="Supprimer"/>
<input type="text" id="oTextInput" placeholder="Entrez une note ici" />
<input type="button" id="binput" value="Ajouter"/>
<div class="divlist">
<ul class="notelist" id="notelist">
</ul>
</div>
</form>
<input type="button" id="del" value="work"/>
</body>
</html>

还有我的 JavaScript 代码:

function clickHandler(e) {
addnote();
}

function clickHandlerDel(e) {
var oTitle = document.getElementById("oTitleInput").value;
delnote(oTitle);
document.getElementById("oTitleInput").value = '';
document.getElementById("oTextInput").value = '';
}

function clickHandlerRem(e) {
var oTitle = "test";
delnote(oTitle);
}

function addnote() {
var oTitle = document.getElementById("oTitleInput").value;
document.getElementById("oTitleInput").value = '';
var oText = document.getElementById("oTextInput").value;
document.getElementById("oTextInput").value = '';
localStorage.setItem(oTitle, oText);
affnote();
}

function affnote() {
var node = document.getElementById("notelist");
while (node.firstChild) {
node.removeChild(node.firstChild);
}
for (var i = 0, len = localStorage.length; i < len; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
var html = "<li id=\"" + key + "\">Titre : " + key + "\<input type=\"button\" id=\"del\" value=\"X\"\/\><br />Texte : " + value + "</li>";
document.querySelector('#notelist').innerHTML += html;
}
}

function delnote(keyname) {
localStorage.removeItem(keyname);
affnote();
}

function main() {
affnote();
}

document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#binput').addEventListener('click', clickHandler);
document.querySelector('#bdel').addEventListener('click', clickHandlerDel);
document.querySelector('#del').addEventListener('click', clickHandlerRem);
main();
});

最佳答案

在您创建新的 DOM 元素后,Javascript 不会重新附加事件处理程序。您必须手动将事件处理程序添加到新元素:

运行

document.querySelector('#del').addEventListener('click', clickHandlerRem);

affnote() 的末尾。

关于javascript - 让事件监听器在插入的 HTML 按钮上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30446605/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com