Question

我要在每个li元素之后通过Javascript创建按钮元素。但是，事件侦听器不适用于这些按钮。事件侦听器绑定到带有文本“ Enter”的按钮，该文本已经在HTML中并且没有动态创建，可以正常工作。因此，我相信问题与我使用Javascript创建按钮有关。我怀疑这可以通过事件委派来解决，但是我不知道该怎么办。

以下是我的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>

以下是我的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);

我知道我可以使用jQuery解决此问题。但是，我需要能够使用Javascript解决此问题。

Answer 1

您正在添加仅HTML按钮，其中不包括事件侦听。您需要使用insertAdjacentElement为按钮添加DOM元素。另外，您需要在动态添加addDeleteButton

之后调用li

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

您需要在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 个答案: