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标签显示在浮动div标签中，但它不响应转换功能。任何人都可以帮助我找出它为什么没有取消点击？

该示例可在http://www.kreativperspektiv.com/pb2

找到

更新：在阅读下面的响应之前，我只是在代码中添加了一个单击事件处理程序，它似乎有效。

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

使用innerHTML将子元素添加到父元素不是最佳做法：

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（参见他的评论），两者都应该有效，所以代码中的问题可能在其他地方。也许你可以在问题中添加更多细节。

如何动态添加带有事件监听器的按钮到DOM？

1 个答案: