JavaScript - 在所有创建的li元素上添加addEventListener

时间:2017-02-08 11:27:18

标签: javascript html css

所以我有一个简单的脚本添加" li" " ul"并为他们分配一个班级。现在我想改变" li"点击事件上的项目。

这是HTML:

<script src="http://www.test.com" />

和JS:

<form class="form">
<input id="newInput" type="text" placeholder="Dodaj pozycję">
<button id="createNew" type="button">Dodaj</button>
</form>
<h2>Moja lista:</h2>
<div class="listBg">
<ul id="list">
</ul>
</div>
<button id="deleteAll" type="button">Wyczyść</button>

我认为这样的事情应该可以解决问题,但它不起作用:

function addItem() {
    var myList = document.getElementById("list"); // get the main list ("ul")
    var newListItem = document.createElement("li"); //create a new "li" element
    var itemText = document.getElementById("newInput").value; //read the input value from #newInput
    var listText = document.createTextNode(itemText); //create text node with calue from input
    newListItem.appendChild(listText); //add text node to new "li" element
    if (itemText === "") { // if input calue is empty
        alert("Pole nie może być puste"); // show this alert
    } else { // if it's not empty
        var x = document.createElement("span"); // create a new "span" element
        x.innerText = "X"; // add inner text to "span" element
        x.className = "closer"; // add class to "span" element
        myList.appendChild(newListItem); // add created "li" element to "ul"
        newListItem.className = "item"; // add class to new "li" element
        newListItem.appendChild(x); // add a "span" to new "li" element
        var itemText = document.getElementById("newInput"); // read current input value
        itemText.value = ""; // set current input calue to null
    }
};

我对javascript很新,所以我很感激答案的一些解释。

5 个答案:

答案 0 :(得分:8)

对动态创建的元素使用事件委托。有了这个,你只需要在ul#list上有一个事件监听器,它将适用于你动态连接到它的所有元素:

document.getElementById("list").addEventListener("click",function(e) {
  if (e.target && e.target.matches("li.item")) {
    e.target.className = "foo"; // new class name here
    }
});

这是一个简化的示例,您可以看到代码会发生什么:

function addItem(i) {
  var li = document.createElement('li');
  li.appendChild(document.createTextNode(i));
  li.className = 'item';
  document.getElementById('list').appendChild(li);
}

var counter = 2;
document.getElementById('btn').addEventListener('click', function() {
  addItem(counter++);
});

document.getElementById("list").addEventListener("click", function(e) {
  if (e.target && e.target.matches("li.item")) {
    e.target.className = "foo"; // new class name here
    alert("clicked " + e.target.innerText);
  }
});
<ul id="list">
  <li class="item">1</li>
</ul>

<button id="btn">
  add item
</button>

答案 1 :(得分:1)

试试这个:

var item = document.getElementsByClassName("item");
for (var i = 0; i < item.length; i++) {
  item[i].addEventListener("click", itemDone);
}

答案 2 :(得分:1)

您必须在每个项目上设置eventListener,因为document.getElementsByClassName()会返回一个项目集合,您只需一次调用{{}就可以向所有项目添加一个事件监听器{1}}。

因此,就像您在addEventListener()中使用的循环一样,您必须遍历所有项目并将侦听器添加到它们中:

itemDone()

正如评论中所指出的,您也可以在创建元素时直接这样做,因此在var items = document.getElementsByClassName("item"); for (var i = 0; i < items.length; i++) { items[i].addEventListener("click", itemDone); } 函数中添加:

addItem()

答案 3 :(得分:0)

首先,尝试使用getElementByTagName代替querySelectorAll,因为querySelectorAll速度较慢。第二,item收到一个数组,因此item.addEventListener会给你一个错误。你必须在一个循环中对item [counter]执行addEventListener。

答案 4 :(得分:0)

function addItem(i) {
  var li = document.createElement('li');
  li.appendChild(document.createTextNode(i));
  li.className = 'item';
  document.getElementById('list').appendChild(li);
}

var counter = 2;
document.getElementById('btn').addEventListener('click', function() {
  addItem(counter++);
});

document.getElementById("list").addEventListener("click", function(e) {
  if (e.target && e.target.matches("li.item")) {
    e.target.className = "foo"; // new class name here
    alert("clicked " + e.target.innerText);
  }
});
<ul id="list">
  <li class="item">1</li>
  <li class="item">1</li>
  <li class="item">1</li>
  <li class="item">1</li>
  <li class="item">1</li>
</ul>

<button id="btn">
  add item
</button>