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." );
});

从JS节点中的模板处理按钮属性

1 个答案: