添加Click事件以动态添加列表项而不使用Jquery(Adding Click Event to Dynamically added List Items without Jquery)

添加Click事件以动态添加列表项而不使用Jquery(Adding Click Event to Dynamically added List Items without Jquery)

我的问题是，当我点击提供者这是一个列表项目与一些元素，如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>

my problem is when i click on the provider which is a list-item with some elements like img and h2 i always get the last value of the provider variable. the parameter which i assign to clickProvider did not contain the value which it gets when i iterate through all providers.

when i click on the list-item it did not contains the right text.

i hope that you can understand my problem.

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

Edit:

HTML Code. The for-loop above creates that 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循环中没有特殊的范围，因此每次迭代都会覆盖变量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]); } }

There's no special scope inside a for loop, so the variable provider is overwritten on every iteration, and by the time you click an element, you have the last iterated provider.

What you need is some kind of closure or scope to keep the value of provider, like this

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]); } }添加Click事件以动态添加列表项而不使用Jquery(Adding Click Event to Dynamically added List Items without Jquery)

我的问题是，当我点击提供者这是一个列表项目与一些元素，如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>

my problem is when i click on the provider which is a list-item with some elements like img and h2 i always get the last value of the provider variable. the parameter which i assign to clickProvider did not contain the value which it gets when i iterate through all providers.

when i click on the list-item it did not contains the right text.

i hope that you can understand my problem.

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

Edit:

HTML Code. The for-loop above creates that 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循环中没有特殊的范围，因此每次迭代都会覆盖变量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]); } }

There's no special scope inside a for loop, so the variable provider is overwritten on every iteration, and by the time you click an element, you have the last iterated provider.

What you need is some kind of closure or scope to keep the value of provider, like this

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