添加事件偵聽器模板標籤

我創造了很多DOM元素（每個人都有相同的HTML結構）與<template>標籤克隆的元素：添加事件偵聽器模板標籤

<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);

...但我不知道是否有另一個類似的那些還沒有爲我工作更簡單的方法。

來源

2015-06-21 guest459473

你爲什麼選擇'data- *'屬性？ – 2015-06-21 19:18:36

@Jamen只是因爲我不想要任何id重複。 – guest459473

@Jamen類名可以在任何時候改變，例如當我設計一些新的按鈕和不同的HTML結構等等。在這種情況下，'data- *'屬性就像id一樣，所以我可以將JS功能來自CSS設計。 – guest459473

在使用document.importNode「激活」模板之前，它的內容是不屬於DOM的惰性節點。

作爲每的addEventListener文檔：

事件目標可以是元素的文檔中，文檔本身，一個窗口，或支持事件的任何其他對象（例如 XMLHttpRequest的）。

在你的例子因此添加事件偵聽器將無法正常工作，直到你克隆的模板內容和他們的文檔添加到現有的節點。

如果您準備好使用jQuery，則有一種解決方法。您可以使用jQuery中的event delegation方法將事件綁定到父元素。

是這樣的：

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

什麼這將從根本上做到這一點，其正在從this.container將泡沫截止到父母的兒童觸發任何點擊。如果它滿足選擇標準[data-price]就會觸發行動。

來源

2015-10-04 11:05:15 Abhinav

jQuery'on' * trick *是神奇的。 –

如果您可以繞過使用列表行，那麼您的document.getElementById（...）將返回一個實際的DOM元素，而不僅僅是它現在執行的DocumentFragment。這意味着importNode（...）將返回真正的DOM節點，您可以在其中調用addEventListener並掛接事件！

來源

2017-11-21 07:24:04

添加事件偵聽器模板標籤

回答

相關問題