私は<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 );
...しかし、私にとってうまくいかなかったものに似た、別のもっと簡単な方法があるのだろうか。
document.importNodeを使用してテンプレートを「アクティブ化」するまで、そのコンテンツはDOMの一部ではない不活性ノードです。
addEventListenerのドキュメントによると：
イベントターゲットは、ドキュメント内の要素、ドキュメント自体、ウィンドウ、またはイベントをサポートするその他のオブジェクト（XMLHttpRequestなど）です。
したがって、例にイベントリスナーを追加することは、テンプレートの内容を複製してドキュメント内の既存のノードに追加するまで機能しません。
jQueryを使用する準備ができている場合は、回避策があります。jquery onメソッドを使用したイベント委任を使用して、イベントを親要素にバインドできます。
このようなもの：
$(this.container).on('click', '[data-price]', action);
これが本質的に行うことは、の子からトリガーされているクリックがthis.container親までバブルアップすることです。セレクターの[data-price]アクション基準を満たしている場合は、トリガーされます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加