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

直到你激活＆＃39;使用document.importNode的模板，其内容是惰性节点，不属于DOM。

根据addEventListener docs：

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

因此，在您的示例中添加事件侦听器将无法工作，直到您克隆模板内容和将它们添加到文档中的现有节点。

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

类似的东西：

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

从this.container的孩子触发的任何点击都会向父母发送，这实际上是什么。如果它满足[data-price]动作将在其上触发的选择标准。

Answer 2

如果你可以使用a列表行，那么你的document.getElementById（...）将返回一个实际的DOM元素，而不仅仅是它现在所做的DocumentFragment。这意味着importNode（...）将返回真正的DOM节点，您可以在其上调用addEventListener并挂接事件！

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

2 个答案: