為什么我的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。 我建議將此代碼放在一個方法中，並在渲染代碼后調用它。