addEventListener不适用于动态按钮--javascript

时间:2015-02-25 15:04:51

标签: javascript button addeventlistener

所以我现在正忙于学习JavaScript。我创建了一些动态按钮,我尝试添加一个addEvenListener。但它不起作用,我无法弄清楚它为什么不起作用。我只测试了一些东西,并尝试使用localstorage中的值创建按钮。它几乎正常工作,只有addEvenListener不起作用。我只想用localstorage中的密钥进行简单警报。

for (var i = 0; i <= localStorage.length-1; i++) {
    var categoryButton = document.createElement('input');
    categoryButton.setAttribute('class', 'forumMenu');
    categoryButton.setAttribute('type', 'button');
    categoryButton.setAttribute('name', localStorage.key(i));
    categoryButton.setAttribute('value', localStorage.key(i));
    categoryButton.setAttribute('id', localStorage.key(i));
    categoryButton.addEventListener('click', function(col){
    alert(col);
}(localStorage.key(i)),true);
    forumMenu.appendChild(categoryButton);
}

有谁知道它为什么不起作用?

3 个答案:

答案 0 :(得分:1)

您未将功能传递给EventTarget.addEventListener()。您立即执行并传递此结果:

function (col) {
  console.log(col);
}(localStorage.key(i))

......这是undefined。您可以通过使用以下语法来修改:

categoryButton.addEventListener('click', (function(col) { 
   // return a function to addEventListener
   return function(){
      console.log(col);
   }
})(localStorage.key(i)),true);

这是一个演示:

&#13;
&#13;
var input;
for (var i = 0; i <= 5; i++) {
  input = document.createElement('input');
  input.type = "button"
  input.value = i;
  input.addEventListener('click', function(i) {
    // return a function to addEventListener
    return function() {
      console.log(i);
    }
  }(i), true);
  document.body.appendChild(input);
}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您已将值存储在id属性中,因此只需使用它:

 for (var i = 0; i <= localStorage.length-1; i++) {
    var categoryButton = document.createElement('input');
    categoryButton.setAttribute('class', 'forumMenu');
    categoryButton.setAttribute('type', 'button');
    categoryButton.setAttribute('name', localStorage.key(i));
    categoryButton.setAttribute('value', localStorage.key(i));
    categoryButton.setAttribute('id', localStorage.key(i));

    categoryButton.addEventListener('click', function () {alert(this.getAttribute('id'));});
 document.body.appendChild(categoryButton);
 }

在事件处理程序中,this引用<input>元素本身,因此您只需检索属性值。

答案 2 :(得分:-2)

那是因为你将eventlistener分配给一个不在DOM中的对象(那是因为你在加载DOM之后创建了这个元素)

试试这个:

categoryButton.onclick = function(col){
    alert(col);
}

您可以向var声明一个函数,然后将此函数重新设置为事件处理程序:

var myFunction = function(){
    alert("I'm a function");
}

myElement.onclick = myFunction;