为什么我的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。我建议将此代码放在一个方法中，然后在渲染代码后调用它。