使事件偵聽器在插入的HTML按鈕上工作

Question

如何使事件偵聽器在插入的HTML上工作？

我在列表中插入<li id="test">Titre : test<input type="button" id="del" value="X"><br>Texte : </li> ，但是我的事件偵聽器僅適用在HTML頁面上創建的名為“工作”的按鈕上。

我想通過單擊列表中的新按鈕來調用函數clickHandlerRem 。

圖片：

在此處輸入圖片說明

這是我的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();
});

Answer 1

創建新的DOM元素后，Javascript將不會重新附加事件處理程序。 您將必須手動將事件處理程序添加到新元素中：

跑

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

在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