Javascript 添加Click事件以动态添加不带Jquery的列表项

我的问题是，当我单击provider时，它是一个包含一些元素（如img和h2）的列表项，我总是得到provider变量的最后一个值。我分配给clickProvider的参数不包含迭代所有提供程序时得到的值

当我点击列表项时，它没有包含正确的文本

我希望你能理解我的问题

function clickProvider(id) {
    console.log(id);
}

function loadProviders() {
    empty('provider-list');

    var providerList = elementById('provider-list');

    for (var index in providers) {
        var provider = providers[index];

        if (elementByName(provider.categorie).length > 0) {
            addProviderToCategory(provider.categorie, provider.text).addEventListener('click', function () {
                clickProvider(provider.text);
                return false;
            });
        } else {
            addProviderCategory(provider.categorie)
            addProviderToCategory(provider.categorie, provider.text).addEventListener('click', function () {
                clickProvider(provider.text);
                return false;
            });
        }
    }
}

document.addEventListener('DOMContentLoaded', function () {
    console.log('DOM loaded');

    loadProviders();
})

编辑：

HTML代码。 上面的for循环创建了该HTML

<ul id="provider-list">
    <li name="category1">
        <a href="">Category Header 1</a>
        <ul id="category1">
            <li>
                <img src="">
                <a href="">Item 1</a>
            </li>
            <li>
                <img src="">
                <a href="">Item 2</a>
            </li>
        </ul>
    </li>
    <li name="category2">
        <a href="">Category Header 2</a>
        <ul id="category2">
            <li>
                <img src="">
                <a href="">Item 1</a>
            </li>
        </ul>
    </li>
</ul>

---

for循环中没有特殊的作用域，因此变量提供程序在每次迭代时都会被覆盖，当您单击某个元素时，您就拥有了最后一个迭代的提供程序

您需要的是某种类型的闭包或作用域来保持提供者的值，如下所示

function loadProviders() {
    empty('provider-list');

    var providerList = elementById('provider-list');

    for (var index in providers) {
        (function(provider) {
            if (elementByName(provider.categorie).length > 0) {
                addProviderToCategory(provider.categorie, provider.text).addEventListener('click', function () {
                    clickProvider(provider.text);
                    return false;
                });
            } else {
                addProviderCategory(provider.categorie)
                addProviderToCategory(provider.categorie, provider.text).addEventListener('click', function () {
                    clickProvider(provider.text);
                    return false;
                });
            }
        })(providers[index]);
    }
}

Javascript

---

如果发布html代码会更好。elementById只是一个帮助函数。它返回html元素。elementById包含返回文档。GetElementById；哦，那是providerList，我误解了，我说的是提供者，那应该是一个对象，而不是数组

window.onload = function () {
    var navigation = document.getElementById("provider-list");
    navigation.onclick = function (evt) {
        // Event tweaks, since IE wants to go its own way...
        var event = evt || window.event;
        var target = event.target || event.srcElement;
        var text = "Link's text: " + target.innerHTML;
        alert(text);
    }
};