Javascript 选择嵌套数据在数据模板中单击

我的模板涉及属性为

数据模板的父级
div
和属性为
数据单击的子级
按钮
：

<script type="text/html" id="containerTemplate">
    <div data-template="myTemplate">    
        <ul>      
          <li>
            <button type="button" data-click="done">
              <span>some text</span>
            </button>
          </li>
        </ul>
    </div>  
</script>

但是
doneBtn
返回null。
您将html代码放在javascript标记中，这就是javascript无法访问html DOM的原因。尝试下面的代码，它会工作

<div data-template="myTemplate">    
    <ul>      
      <li>
        <button type="button" data-click="done">
          <span>some text</span>
        </button>
      </li>
    </ul>
</div> 


<script type="text/javascript">
 const doneBtn = document.querySelector('[data-template = myTemplate] [data-click = done]');
if (doneBtn) {
    //register some event listeners
    console.log($(doneBtn).html());
}
  </script>




一些文本


const doneBtn=document.querySelector（“[data template=myTemplate][data click=done]”）；
if（doneBtn）{
//注册一些事件侦听器
log（$（doneBtn.html（））；
}
如果您使用的是jQuery，您可以使用
.data（）
（源代码：）或者您可以使用
$（选择器）.attr（“数据单击”）====“完成”
如果您有兴趣在没有jQuery的情况下执行此操作，请遵循以下操作。。。你熟悉模板吗？您必须在DOM中实际注入该脚本模板，才能使用querySelector将其作为目标
<div data-template="myTemplate">    
    <ul>      
      <li>
        <button type="button" data-click="done">
          <span>some text</span>
        </button>
      </li>
    </ul>
</div> 


<script type="text/javascript">
 const doneBtn = document.querySelector('[data-template = myTemplate] [data-click = done]');
if (doneBtn) {
    //register some event listeners
    console.log($(doneBtn).html());
}
  </script>