Слушатели событий не работают с динамически созданными кнопками, используя чистый Javascript? - PullRequest
Новая
       1

Слушатели событий не работают с динамически созданными кнопками, используя чистый Javascript?

0 голосов
/ 06 июля 2018

Я создаю элементы кнопок через Javascript после каждого элемента li. Однако прослушиватели событий не работают для этих кнопок. Слушатели событий, привязанные к кнопке с текстом «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.

Ответы [ 2 ]

0 голосов
/ 06 июля 2018

Вам необходимо добавить события после создания узлов в 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>
0 голосов
/ 06 июля 2018

Вы добавляете только кнопку HTML, которая не включает прослушивание события.Вам необходимо добавить элемент DOM для кнопки, используя insertAdjacentElement.Также вам нужно позвонить 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...