事件监听器不能使用纯Javascript处理动态创建的按钮？

Question

I'm creating button elements through Javascript after each li element. 我在每个li元素之后通过Javascript创建按钮元素。 However, event listeners are not working for these buttons. 但是，事件侦听器不适用于这些按钮。 Event listeners bound to button with text "Enter", which is already in the HTML and not dynamically created work fine. 事件侦听器绑定到带有文本“ Enter”的按钮，该文本已经在HTML中并且没有动态创建，可以正常工作。 Hence, I believe the problem has something to do with my creating of buttons using Javascript. 因此，我相信问题与我使用Javascript创建按钮有关。 I suspect this can be solved by event delegation, but I'm lost as to how. 我怀疑这可以通过事件委托来解决，但是我不知道该如何做。

Following is my HTML: 以下是我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="Enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="bold red" random="23">Notebook
        </li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Following is my Javascript: 以下是我的Javascript：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var shoppingItem = document.getElementsByTagName("li");
var ul = document.getElementsByTagName("ul")[0];

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    var ul = document.getElementsByTagName("ul")[0];
    ul.appendChild(li);
    input.value = "";
    return li;
}

function addElementAfterClick() {
    if (inputLength() > 0) {
        createListElement();    
    }
}

function addElementAfterPress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

function addLineThroughEvent(element) {
    element.addEventListener("click", function() {
    element.classList.toggle("done");
    });
}

function addDeleteButton(element) {
    var del = document.createElement("button");
    del.addEventListener("click", function () { // This doesn't work
        alert("You clicked")
    })
    del.appendChild(document.createTextNode("Delete"));
    element.insertAdjacentHTML("afterend", del.outerHTML);
}

input.addEventListener("keypress", addElementAfterPress);

Array.from(shoppingItem).forEach(addLineThroughEvent);

Array.from(shoppingItem).forEach(addDeleteButton);

button.addEventListener("click", addElementAfterClick);

I know I can solve this using jQuery. 我知道我可以使用jQuery解决此问题。 However, I need to be able to solve this using Javascript. 但是，我需要能够使用Javascript解决此问题。

Answer 1

You are adding the button HTML only which does not include the event listens. 您正在添加仅不包含事件侦听的按钮HTML。 You need to append the DOM element for the button using insertAdjacentElement . 您需要使用insertAdjacentElement为按钮添加DOM元素。 Also, you need to call addDeleteButton after dynamically adding li 另外，您需要在动态添加li之后调用addDeleteButton

 var button = document.getElementById("enter"); var input = document.getElementById("userinput"); var shoppingItem = document.getElementsByTagName("li"); var ul = document.getElementsByTagName("ul")[0]; function inputLength() { return input.value.length; } function createListElement() { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); var ul = document.getElementsByTagName("ul")[0]; ul.appendChild(li); addDeleteButton(li) input.value = ""; return li; } function addElementAfterClick() { if (inputLength() > 0) { createListElement(); } } function addElementAfterPress(event) { if (inputLength() > 0 && event.keyCode === 13) { createListElement(); } } function addLineThroughEvent(element) { element.addEventListener("click", function() { element.classList.toggle("done"); }); } function addDeleteButton(element) { var del = document.createElement("button"); del.addEventListener("click", function () { // This doesn't work alert("You clicked") }) del.appendChild(document.createTextNode("Delete")); element.insertAdjacentElement("afterend", del); } input.addEventListener("keypress", addElementAfterPress); Array.from(shoppingItem).forEach(addLineThroughEvent); Array.from(shoppingItem).forEach(addDeleteButton); button.addEventListener("click", addElementAfterClick);

 <!DOCTYPE html> <html> <head> <title>Javascript + DOM</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Shopping List</h1> <p id="first">Get it done today</p> <input id="userinput" type="text" placeholder="Enter items"> <button id="enter">Enter</button> <ul> <li class="bold red" random="23">Notebook </li> <li>Jello</li> <li>Spinach</li> <li>Rice</li> <li>Birthday Cake</li> <li>Candles</li> </ul> <script type="text/javascript" src="script.js"></script> </body> </html>

Answer 2

You need to add the events after creating the nodes in createListElement 您需要在createListElement中创建节点后添加事件

 var button = document.getElementById("enter"); var input = document.getElementById("userinput"); var shoppingItem = document.getElementsByTagName("li"); var ul = document.getElementsByTagName("ul")[0]; function inputLength() { return input.value.length; } function createListElement() { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); var ul = document.getElementsByTagName("ul")[0]; ul.appendChild(li); input.value = ""; addDeleteButton(li); addLineThroughEvent(li); return li; } function addElementAfterClick() { if (inputLength() > 0) { createListElement(); } } function addElementAfterPress(event) { if (inputLength() > 0 && event.keyCode === 13) { createListElement(); } } function addLineThroughEvent(element) { element.addEventListener("click", function() { element.classList.toggle("done"); }); } function addDeleteButton(element) { var del = document.createElement("button"); del.addEventListener("click", function () { // This doesn't work alert("You clicked") }) del.appendChild(document.createTextNode("Delete")); element.insertAdjacentElement("afterend", del); } input.addEventListener("keypress", addElementAfterPress); Array.from(shoppingItem).forEach(addLineThroughEvent); Array.from(shoppingItem).forEach(addDeleteButton); button.addEventListener("click", addElementAfterClick);

 <!DOCTYPE html> <html> <head> <title>Javascript + DOM</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Shopping List</h1> <p id="first">Get it done today</p> <input id="userinput" type="text" placeholder="Enter items"> <button id="enter">Enter</button> <ul> <li class="bold red" random="23">Notebook </li> <li>Jello</li> <li>Spinach</li> <li>Rice</li> <li>Birthday Cake</li> <li>Candles</li> </ul> <script type="text/javascript" src="script.js"></script> </body> </html>

事件监听器不能使用纯Javascript处理动态创建的按钮？

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-07-06 13:59:58

解决方案2
1 2018-07-06 14:02:51

事件监听器不能使用纯Javascript处理动态创建的按钮？

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-07-06 13:59:58

解决方案2 1 2018-07-06 14:02:51

解决方案1
1 已采纳 2018-07-06 13:59:58

解决方案2
1 2018-07-06 14:02:51