在JS节点中操纵模板的button属性

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

<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节点。 有什么select？

Answer 1

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

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