Javascript 为什么不起作用-动态生成的更改事件_Javascript_Dom Events

Javascript 为什么不起作用-动态生成的更改事件

javascript

Javascript 为什么不起作用-动态生成的更改事件,javascript,dom-events,Javascript,Dom Events,我很好奇为什么当我点击每个输入复选框时，所有的警报都是“_3”，而我期望的是“_0”、“_1”和“_2”。如果没有太多修改，我将如何获得我期望的结果。这是为了解决我正在进行的项目中一个更大的问题 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <title></title> <meta name="descriptio

我很好奇为什么当我点击每个输入复选框时，所有的警报都是“_3”，而我期望的是“_0”、“_1”和“_2”。如果没有太多修改，我将如何获得我期望的结果。这是为了解决我正在进行的项目中一个更大的问题

<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="main"></div>
    <script>

    var generate = function() 
    {
        var elem = document.getElementById('main');
        var list = document.createElement('ul');

        for(var i=0; i<3;i++)
        {
            var liElem = document.createElement('li');
            var x = document.createElement('input');
            x.setAttribute('type', 'checkbox');
            x.setAttribute('value', i);
            x.setAttribute('id', '_A' + i);
            x.addEventListener('change', function () { alert('_'+(i)); });
            liElem.appendChild(x);
            list.appendChild(liElem);
        }
        elem.appendChild(list);
    }

    window.addEventListener('load', function () {
        generate();
    });

    </script>
</body>
</html>

您可以使用

this.id

，它在事件上下文中为您提供元素的id：

var generate=function（）{
var elem=document.getElementById（'main'）；
var list=document.createElement（'ul'）；
对于（变量i=0；i<3；i++）{
var liElem=document.createElement（'li'）；
var x=document.createElement（'input'）；
x、 setAttribute（'type'，'checkbox'）；
x、 setAttribute（'value'，i）；
x、 setAttribute（'id'，'u A'+i）；
x、 addEventListener（'change'，function（）{
console.log（“”+this.id.slice（-1））；
});
利勒姆·阿佩奇尔德（x）；
列表。追加儿童（liElem）；
}
附加子元素（列表）；
}
addEventListener（'load'，function（））{
生成（）；
});
不喜欢id解决方案，但确实发现它很好地工作了x.addEventListener（'change'，function（component）{console.log（'u'+i）；}.bind（this，i））；
x.addEventListener('change', function (i) { console.log('_'+i); }.bind(this, i));'