Question

我试图在使用JavaScript的特定for循环中创建的每个li元素上添加一个事件监听器（onclick）。

首先我尝试使用tempLi.onclick（请参阅下面的代码了解上下文），但它不会运行该函数。之后我在Stackoverflow上搜索了这个问题，我读到我在下面使用的这个方法应该可行 - 但它不是（至少在我的情况下）。

if (users.length !== 0) {
    for (let i = 0; i < users.length; i++) {
        let tempLi = d.createElement('li');
        tempLi.className = 'btn btn-primary knappur'
        tempLi.innerHTML = users[i];
        getId('usersUl').appendChild(tempLi);
        (function(value) {
            tempLi.addEventListener("click", function() {
                alert(value);
            }, false);
        })(users[i]);
        getId('usersUl').innerHTML += '<br>';
    }
}

代码位于名为loginPrepare的函数中：

let loginPrepare = () => { ... }

点击生成的li（tempLi）后如何执行代码？

编辑：点击＆＃34; li＆＃34;时我想要运行的代码是login(users[i])

Answer 1

我会将事件处理程序放在你的ul上并依赖事件冒泡而不是将事件处理程序附加到每个事件处理程序。它看起来像这样。

document.getElementById('usersUl')
  .addEventListener('click', function(e) {
    if (e.target.hasClass('knappur') {
      // Do your work
    }
  });

Answer 2

您正在循环中创建一个函数，引用不断变化的索引i，当循环完成时，它可能与您认为的值完全不同。

另外，我认为这样你就可以在tempLi有时间正确地集成到dom之前附加事件监听器。

第三：您不需要为每个列表项创建新的事件监听器。一个就够了.//

请改为尝试：

if (users.length !== 0) {
    const list = getId('usersUl')
    for (let i = 0; i < users.length; i++) {
        let tempLi = d.createElement('li');
        tempLi.className = 'btn btn-primary knappur';
        tempLi.innerHTML = users[i];
        tempLi.setAttribute('data-user', users[i])
        list.appendChild(tempLi);
        //list.innerHTML += '<br>';  don't do this btw, <br />s aren't valid children of lists!
    }
    list.addEventListener("click", event => {
       const user = event.target.getAttribute('data-user');
       alert(user);
    });
}

Answer 3

我们可以使用JQuery以非常简单的方式实现对HTML的事件绑定：

if (self.dictEmployeeDetail["id"] != nil){
    userID = self.dictEmployeeDetail["id"] as Int
}

Onclick活动为＆＃34; li＆＃34;在使用createElement时的for循环中

3 个答案: