我正在使用一个脚本,该脚本通过使用 createElement 和 appendChild 添加带有 JS 和 jQuery 的对象来创建这样的 HTML 结构:
<div id="divLayer">
<div id="divBox">
<!-- stuff -->
<div id="btnSave" class="button small">Save</div>
</div>
</div>
元素位置分别为absolute、absolute和relative,显示为block、block和inline-block。我已经定义了一个包含对象属性的数组,如下所示:
var objects = {
divLayer: {
tag: 'DIV',
id: 'divLayer',
parent: 'body'
},
divBox: {
tag: 'DIV',
id: 'divBox',
parent: '#divLayer'
},
btnSave: {
tag: 'DIV',
HTML: 'Save',
id: 'btnSave',
parent: '#divBox',
events: {
click: function () {
alert ( 'Clicked' );
}
}
}
}
这是我创建对象并向它们添加侦听器的部分:
for ( var config in objects ) {
var object = document.createElement ( config.tag );
...Setup other attributes...
for ( var event in config.events ) object.addEventListener ( event, config.events [ event ] );
$ ( config.parent ).get ( 0 ).appendChild ( object );
}
从图形上看,一切都是正确的。我可以在背景上看到 divLayer,在其上看到 divBox,在框内看到 btnSave,并且每个属性都已正确编译,但是当我单击按钮时,什么也没有发生。如果我将按钮直接放在 divLayer 上,它就可以工作。
我在哪里做错了?
提前谢谢!