爲什麼我的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。我建議將這些代碼放在一個方法中，並在渲染代碼後調用它。