从JS节点中的模板操纵按钮属性

Question

我有一个HTML模板，由包含三个按钮的DIV组成。

<template ID="template3buttons"> 
    <div ID="container3buttons" class="boxes"> 
     <div ID= "sunShadeUp" class="boxes"> 
      <input type="button" 
       id="SunshadeButtonUp" 
       class="SunshadeSmallButton" 
       onclick="GenericAction('ENO_ShutterStop($all)', 'all')" 
       value=""/> 
     </div> 
     <div ID= "sunShadeStop" class="boxes"> 
      <input type="button" 
       id="SunshadeButtonStop" 
       class="SunshadeSmallButton" 
       onclick="GenericAction('ENO_ShutterStop($all)', 'all')" 
       value=""/> 
     </div> 
     <div ID= "sunShadeDown" class="boxes"> 
      <input type="button" 
       id="SunshadeButtonDown" 
       class="SunshadeSmallButton" 
       onclick="GenericAction('ENO_ShutterStop($all)', 'all')" 
       value=""/> 
     </div> 
    </div> 
</template> 

我使用JS生成模板的许多副本，最终将其插入适当的DIV中。

function create3Button(cellButtonId) //create boxes with 3 buttons each 
{ 
    var template3buttons = document.querySelector('#template3buttons'); 
    var insertionPoint= document.getElementById(cellButtonId); 
    var clone = document.importNode(template3buttons.content, true); 
    insertionPoint.appendChild(clone); 
} 

现在，我需要操作“onClick”标记为根据插入点的模板的每个副本的内容。我知道getElementById()不适用于DOM节点。有什么选择？

Answer 1

如果你使用jQuery，你可以这样做：

$("[id*=sunShade]").children().click(function() { 
    alert("Handler for .click() called."); 
});