使事件侦听器在插入的HTML按钮上工作

Question

How can I make my event listener work on inserted HTML? 如何使事件侦听器在插入的HTML上工作？

I insert <li id="test">Titre : test<input type="button" id="del" value="X"><br>Texte : </li> on my list, but my event listener only works on the button named "work", which is created in the HTML page. 我在列表中插入<li id="test">Titre : test<input type="button" id="del" value="X"><br>Texte : </li> ，但是我的事件侦听器仅适用在HTML页面上创建的名为“工作”的按钮上。

I want to call the function clickHandlerRem by clicking on the new button in the list. 我想通过单击列表中的新按钮来调用函数clickHandlerRem 。

Image: 图片：

在此处输入图片说明

Here's my HTML: 这是我的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>

And my JavaScript code: 还有我的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();
});

Answer 1

Javascript will not reattach event handlers after you create a new DOM element. 创建新的DOM元素后，Javascript将不会重新附加事件处理程序。 You will have to add the event handler to your new element manually: 您将必须手动将事件处理程序添加到新元素中：

Run 跑

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

at the end of affnote() . 在affnote()的末尾。

使事件侦听器在插入的HTML按钮上工作

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-05-25 22:10:37

使事件侦听器在插入的HTML按钮上工作

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-05-25 22:10:37

解决方案1
2 已采纳 2015-05-25 22:10:37