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

Question

I am trying to apply a event on a button but it doesn't seem to be responding to this code. I am using mustache templates for my data but I am not sure if thats the problem for it to not to resposd to getElementById tag or something. Any help would be appreciated.

<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

Set the onclick property after the mustache template is rendered. getElementById will not find the element if it isn't yet in the DOM. Since the code that sets onclick is just in script tags without any sort of document.ready , it can execute before the page has finished rendering (and you have rendered the template). You don't want to set onclick until after you have rendered your mustache template. I suggest putting this code in a method and calling it after your render code.