JavaScript 循环中动态添加元素事件绑定问题及解决方案

这是因为在循环中，每次执行'document.getElementById("appList").innerHTML += ... '时，会重新渲染整个'appList'的 HTML 内容。而在重新渲染之前，之前的'addBtn'元素已经被替换掉了，所以之前的点击事件失效了。

解决这个问题的方法是将点击事件绑定放在循环结束后执行，可以通过给每个'addBtn'元素添加一个唯一的'id'，然后在循环结束后再遍历所有的'addBtn'元素，给它们绑定点击事件。

以下是修改后的代码：

function freshAppList() {
    appData.forEach(function(item, index) {
        var currentAppData = item;
        var li = document.createElement("li");
        li.className = "mdui-list-item mdui-ripple";
        li.innerHTML = `
            <div class="mdui-list-item-avatar" style="border-radius: 8px;background: #fff;">
                <img src="${item.icon}" style="border-radius: 8px;"/>
            </div>
            <div class="mdui-list-item-content">${item.name}</div>
            <i class="mdui-list-item-icon mdui-icon material-icons" id="addBtn_${index}">add</i>
        `;
        document.getElementById("appList").appendChild(li);
    });

    for (var i = 0; i < appData.length; i++) {
        document.getElementById(`addBtn_${i}`).onclick = function() {
            console.log(appData[i]);
        };
    }
}

这样修改之后，每个'addBtn'元素都会正确地绑定点击事件，并且可以输出对应的'currentAppData'。