在沒有Jquery的情況下將Click事件添加到動態添加的列表項中

Question

我的問題是，當我單擊提供程序時，它是一個包含img和h2之類的元素的列表項，我總是得到提供程序變量的最后一個值。 我分配給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>

Answer 1

for循環內部沒有特殊的作用域，因此變量provider在每次迭代時都會被覆蓋，並且當您單擊元素時，您將擁有最后一個迭代的provider 。

您需要的是某種封閉或范圍，以保持provider的價值，像這樣

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]);
    }
}

Answer 2

Java腳本

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);
    }
};

演示