Как динамически добавить кнопку с прослушивателем событий в DOM?

Question

Я добавил элемент следующим образом:

var number = document.createElement('div'); 
number.className = 'number'; 
number.innerHTML = '<div><button id="row">ROW</button></div>'; 
//number.textContent = (i/8) + 1; 
element.appendChild (number); 

У меня есть слушателя событий для кнопки следующим образом:

var button = document.getElementById('row'); 
button.addEventListener('click', function (event) { 
    transform(targets.row, 1000); 
}, false); 

Хотя DIV тег отображается в плавающем сНе теге, он не реагирует на функция преобразования. Может ли кто-нибудь помочь мне узнать, почему он не подбирает клик?

Пример можно найти на http://www.kreativperspektiv.com/pb2

UPDATE: Перед чтением ответ ниже, я просто добавил обработчик события щелчка к коду, который, кажется, работает.

var xcollapse = document.createElement('div'); 
xcollapse.className = 'xcollapse'; xcollapse.innerHTML = '<button onclick="transform(targets.row, 1000)">Expand</button><button onclick="transform(targets.table, 1000)">Collapse</button>'; 
element.appendChild(xcollapse); 

Это похоже на работу, но я уверен, что есть более элегантное решение. Например, было бы неплохо щелкнуть объект, чтобы его развернуть, и кликнуть по нему, чтобы договориться, не имея конкретных кнопок, описывающих эти действия.

Answer 1

Это не считается хорошей практикой добавлять дочерние элементы для родительского элемента:

number.innerHTML = '<div><button id="row">ROW</button></div>'; 

Если вы хотите, чтобы динамически добавлять элементы в DOM вы должны сделать так:

var numberDiv = document.createElement('div'); 
numberDiv.className = 'number'; 

var buttonDiv = document.createElement('div'); 
numberDiv.appendChild('buttonDiv'); 

var button = document.createElement('button'); 
button.id = 'row'; 
buttonDiv.appendChild('button'); 

var buttonText = document.createTextNode("ROW") 
button.appendChild(buttonText); 

element.appendChild (number); 

button.addEventListener('click', function (event) { 
    transform(targets.row, 1000); 
}, false); 

Подробнее о DOM-манипуляции here

Но, согласно @Quentin (см. Его комментарий), оба должны работать, поэтому проблема в вашем коде, вероятно, где-нибудь еще. Возможно, вы можете добавить более подробную информацию к вопросу.