Функция 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

Вы должны добавить БТН к DOM перед установкой его onclick обработчик. –

Проблема в том, что ваш код не работает на йот готового

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

привет спасибо за помощь. Он отлично работает в устройствах 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

привет.thanks для справки. Он отлично работает в устройствах Android, но я не могу нажать кнопку на устройстве ios (IPOD 3-го поколения) – msg

Для iOS попробуйте событие 'touchhend': https://developer.mozilla.org/en-US/docs/Web/Руководство/DOM/События/Touch_events? redirectlocale = EN-US и redirectslug = Web% 2FGuide% 2FTouch_events – MrCode

Функция onclick для динамически добавленной кнопки не работает

ответ

Смежные вопросы