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

【问题标题】：onclick functionality for dynamically added button is not working动态添加按钮的 onclick 功能不起作用
【发布时间】：2013-07-10 18:00:12
【问题描述】：

我使用 HTML5+JS 开发了一个移动网页。我在网页上动态添加了一个按钮。但是当我向该按钮添加 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>

【问题讨论】：

在设置其 onclick 处理程序之前，您需要将 Btn 添加到 DOM。

标签： javascript html css dom

【解决方案1】：

问题不在于点击。问题是您试图在加载/渲染之前获取 #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);
    }
};

【讨论】：

嗨。谢谢您的帮助。它在 android 设备上工作正常，但我无法在 ios 设备（IPOD 第 3 代）中单击按钮
对于 iOS，请尝试 touchend 事件：developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/…

【解决方案2】：

问题是你的代码没有在 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

【讨论】：

嗨。谢谢您的帮助。它在 android 设备上工作正常，但我无法在 ios 设备（IPOD 第 3 代）中单击按钮