Question

我的模板涉及父级div，其属性为data-template，而子级button属性为data-click：

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

如何选择button的{{1}}？

我试过这个

data-click="done"

但是const doneBtn = document.querySelector('[data-template = myTemplate] [data-click = done]'); if (doneBtn) { //register some event listeners }返回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>

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

1 个答案: