将事件侦听器添加到从模板标记克隆的元素

Question

我正在使用<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 );

...但我想知道是否有另一种更简单的方法,类似于那些对我没用的方法.

Answer 1

在使用document.importNode“激活”模板之前，其内容是不属于DOM的惰性节点。

根据addEventListener文档：

事件目标可以是文档中的Element，文档本身，Window或任何其他支持事件的对象（例如XMLHttpRequest）。

因此，在您克隆示例内容并将其添加到文档中的现有节点之前，无法在示例中添加事件侦听器。

如果您准备使用jQuery，则有一种解决方法。您可以使用jquery on方法使用事件委托将事件绑定到父元素。

像这样的东西：

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

从本质上讲，这样做是做什么的，由的子级触发的任何点击this.container都会冒到父级。如果满足，[data-price]将触发选择器的操作标准。