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

Question

我的模板涉及具有 data-template 属性的父级 div 和具有 data-click 属性的子级 button >:

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

如何使用 data-click="done" 选择 button？

我试过了

const doneBtn = document.querySelector('[data-template = myTemplate] [data-click = done]');
if (doneBtn) {
    //register some event listeners
}

但是 doneBtn 返回 null。

Answer 1

您将 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>