12

<template>次のタグを使用して、多くの DOM 要素 (それぞれが同じ HTML 構造を持つ) を作成しています。

<template id="weapon-template">
    <div class="button">
        <div class="button-price"  data-price ></div>
        <img class="button-image"  data-image >
        <div class="button-name"   data-name  ></div>
        <div class="button-damage" data-damage></div>
        <div class="button-amount" data-amount></div>
    </div>
</template>

... そして数行の JavaScript:

var clone;
var template = document.getElementById( "weapon-template" );

template.content.querySelector( "[data-image]"  ).src = data.prev;
template.content.querySelector( "[data-price]"  ).innerHTML = data.cost + "$";
template.content.querySelector( "[data-name]"   ).innerHTML = data.name;
template.content.querySelector( "[data-damage]" ).innerHTML = data.damage;
template.content.querySelector( "[data-amount]" ).innerHTML = 0;

clone = document.importNode( template.content, true )
this.container.appendChild( clone );

複製された要素にいくつかのイベント リスナーを追加したいと考えています。私はインターネットから何も見つけることができず、次のようないくつかのことに疲れました。

template.content.querySelector( "[data-price]" ).addEventListener( "click", action, false );
clone.querySelector( "[data-price]" ).addEventListener( "click", action, false );

...これらのどれも機能しませんでした。私は単に次のようなことをすることができます:

var child  = this.container.childNodes[ 0 ];
var target = child.querySelector( "[data-price]" );

target.addEventListener( "click", action, false );

...しかし、うまくいかなかった方法に似た別の簡単な方法があるのではないかと思います。

4

2 に答える 2

10

document.importNode を使用してテンプレートを「アクティブ化」するまで、そのコンテンツは DOM の一部ではない不活性ノードです。

addEventListenerのドキュメントに従って：

イベント ターゲットは、ドキュメント内の要素、ドキュメント自体、ウィンドウ、またはイベントをサポートするその他のオブジェクト (XMLHttpRequest など) です。

したがって、例にイベント リスナーを追加しても、テンプレートの内容を複製してドキュメント内の既存のノードに追加するまでは機能しません。

jQuery を使用する準備ができている場合は、回避策があります。メソッドでjqueryを使用してイベント委任を使用して、イベントを親要素にバインドできます。

このようなもの：

$(this.container).on('click', '[data-price]', action);

これが本質的に行うことは、の子からトリガーされたクリックがthis.container親までバブルアップすることです。セレクターの基準を満たす場合、[data-price]アクションがトリガーされます。

于 2015-10-04T11:05:15.750 に答える