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

如何讓我的事件偵聽器在插入的HTML上工作？使事件偵聽器在插入的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(); 
});

來源

2015-05-25 Clément Béligat

在此處發佈代碼。只需複製/粘貼，選擇它並單擊代碼格式按鈕。 –

在創建新的DOM元素後，Javascript將不會重新附加事件處理程序。你必須將事件處理程序手動添加到您的新元素：在affnote()末

運行

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

。

來源

2015-05-25 22:10:37 Streetlamp

它的工作！多謝！ –

我還有一個問題，你知道如何讓我的「document.querySelector（'＃del'）。addEventListener（'click'，clickHandlerRem）;」對我在列表中生成的所有按鈕生效（ID爲「del」）？ –

@Otto使用['querySelectorAll（）']（http://www.w3schools.com/jsref/met_document_queryselectorall.asp）匹配所有元素，然後遍歷每個元素並附加事件偵聽器。 – Streetlamp

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

回答

相關問題