onclick动态添加按钮的功能不起作用

-2

我开发了一个使用HTML5 + JS的移动网页。我为网页动态添加了一个按钮。但是当我向该按钮添加onclick功能时，它不起作用。onclick动态添加按钮的功能不起作用

我的Html代码是;

<head><script> 
var myarray = ['a','b','c','d','e','f']; 
var arr = document.getElementById('content'); 

for(i=0;i<myarray.length;i++) 
{ 
var table = document.createElement('table'); 
table.className = 'table'; 
var tr = document.createElement('tr'); 
var td = document.createElement('td'); 
     var Btn = document.createElement('input'); 
     Btn.type = 'button'; 
     Btn.className = 'Btn'; 
     Btn.value = 'VOTE'; 
     Btn.id = myarray[i]; 
     Btn.onclick = function(){ 
      alert("You have Selected" + " " + this.id); 
     }; 
td.appendChild(Btn); 
tr.appendChild(td); 
table.appendChild(tr); 
arr.appendChild(table); 
} 
</script> 

<style> 
.table { width:100%;height:70px;} 
.Btn { margin-top:3px;border-radius:0;font-size:15px;height:30px;width:100px; color:#FFFFFF; margin-left:auto;margin-right:auto;display:block; } 
</style></head> 
<body><section id='content'></section></body>

来源

2013-07-12 msg

您需要设置之前BTN添加到DOM其onclick处理程序。 – 2013-07-12 08:38:46

的问题是你的代码是不是在DOM准备

运行

window.onload = function(){ 
     var myarray = ['a','b','c','d','e','f']; 
     var arr = document.getElementById('content'); 

     for(i=0;i<myarray.length;i++) 
     { 
      var table = document.createElement('table'); 
      table.className = 'table'; 
      var tr = document.createElement('tr'); 
      var td = document.createElement('td'); 
      var Btn = document.createElement('input'); 
      Btn.type = 'button'; 
      Btn.className = 'Btn'; 
      Btn.value = 'VOTE'; 
      Btn.id = myarray[i]; 
      Btn.onclick = function(){ 
       alert("You have Selected" + " " + this.id); 
      }; 
      td.appendChild(Btn); 
      tr.appendChild(td); 
      table.appendChild(tr); 
      arr.appendChild(table); 
     } 
    }

演示：Plunker

来源

2013-07-12 08:38:33

hi.thanks寻求帮助。它在Android设备上工作正常，但我无法点击ios设备中的按钮（IPOD第3代） – msg

这并不是说就是问题的onclick。问题在于，您正试图在加载/呈现之前获取#content元素。

解决的办法是包裹代码window.onload确保代码将只执行时，在页面中的元素被加载并准备好使用：

window.onload = function() { 
    var myarray = ['a', 'b', 'c', 'd', 'e', 'f']; 
    var arr = document.getElementById('content'); 

    for (i = 0; i < myarray.length; i++) { 
     var table = document.createElement('table'); 
     table.className = 'table'; 
     var tr = document.createElement('tr'); 
     var td = document.createElement('td'); 
     var Btn = document.createElement('input'); 
     Btn.type = 'button'; 
     Btn.className = 'Btn'; 
     Btn.value = 'VOTE'; 
     Btn.id = myarray[i]; 
     Btn.onclick = function() { 
      alert("You have Selected" + " " + this.id); 
     }; 
     td.appendChild(Btn); 
     tr.appendChild(td); 
     table.appendChild(tr); 
     arr.appendChild(table); 
    } 
};

来源

2013-07-12 08:39:05 MrCode

hi.thanks寻求帮助。它在Android设备上工作正常，但我无法点击ios设备中的按钮（IPOD第3代） – msg

对于iOS，尝试'touchend'事件：https：//developer.mozilla.org/en-US/docs/Web /指南/ DOM /活动/ Touch_events？redirectlocale = EN-US＆redirectslug =网页％2FGuide％2FTouch_events – MrCode

onclick动态添加按钮的功能不起作用

回答

相关问题