0

我正在使用一个脚本，该脚本通过使用 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 上，它就可以工作。

我在哪里做错了？

提前谢谢！

4

2 回答 2

1

除了使用 Array 更安全的 Object 之外，您还试图访问 上的属性config，但config它只是表示属性名称的字符串。

您需要使用config来获取价值。

for (var config in objects) {

    var obj = objects[config]; // get the object

    var object = document.createElement(obj.tag);

    object.id = obj.id;  // set the ID

    for (var event in obj.events)
        object.addEventListener(event, obj.events[event]);

    $(obj.parent).get(0).appendChild(object);
}

此外，您遗漏了一些代码，因此我无法判断其他属性是否设置正确。我添加了 ID，现在您的代码可以工作了。

演示：http: //jsfiddle.net/yBN6V/

于 2012-05-18T15:00:01.297 回答
0

尝试使用 jQuery 本身进行绑定，将事件委托给静态父级：

for (var event in config.events) 
    $(document).on(event, object, config.events[event]);

在该示例中，我已将事件绑定到document，您应该真正使用页面加载时可用的最接近的非动态元素。

于 2012-05-18T14:38:37.500 回答