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に直接配置すると機能します。

私はどこで間違っていますか？

事前にt​​hx！

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 に答える