为什么我的onclick函数不能用于Mustache模板中的按钮？

Question

我想在一个按钮上应用一个事件，但它似乎没有响应此代码。我正在为我的数据使用胡子模板，但我不确定这是否会导致无法将其重置为getElementById标记或其他东西。任何帮助，将不胜感激。

<script id="itemtpl" type="text/template"> 
    {{#items}} 
      <div class ="item"> 
       <div class="item_image"> 
        <img src = "{{item.image_url}}" /> 
       </div> 
       <h3 class="item_name">{{item.menu_item_name}}</h3> 
       <h4 class="item_price">${{item.menu_item_price}}</h4> 
       <p class="item_description"> {{item.menu_item_description}}</p> 
       <button type="button" class="addtocart" id="addtocart" >Add to Cart</button> 
      </div> 
    {{/items}} 
    </script> 

    <script> 
     var addToCart = document.getElementById("addtocart"); 

     addToCart.onclick = function() { 

     alert("Yayyy"); 

     } 
    </script> 

Answer 1

设置渲染小胡子模板后的onclick属性。如果它尚未在DOM中，则getElementById将找不到该元素。由于设置onclick的代码只是在没有任何种类document.ready的脚本标记中，因此它可以在页面完成渲染（并且已渲染模板）之前执行。您不想在渲染胡须模板之前设置onclick。我建议将这些代码放在一个方法中，并在渲染代码后调用它。