Question

我使用通过使用createElement和appendChild添加带有JS和jQuery的对象来创建这样的HTML结构的脚本：

<div id="divLayer">
    <div id="divBox">
        <!-- stuff -->
        <div id="btnSave" class="button small">Save</div>
    </div>
</div>

元素位置分别是绝对，绝对和相对，显示为块，块< / em>和内联块。我已经定义了一个包含对象属性的数组，如下所示：

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上就可以了。

我在哪里做错了？
提前谢谢！

Answer 1

除了使用数组更安全的对象之外，您还试图访问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，现在您的代码正常运行。

DEMO： http://jsfiddle.net/yBN6V/

Answer 2

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

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

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

在addEventListener之后，JS / jQuery事件不会触发

2 个答案: