jquery code not executing Template issue

Question

I've never worked with an jquery template but my form code ("#add-to-cart-form").on('submit', function(event) (code is below) is not executing I believe it has to to do with the template. When I run my code in the console it works fine.

<script type="underscore/template" id="modal_template">
<form id="add-to-cart-form" action="/app/site/backend/additemtocart.nl" method="get">
        <div class="add-to-cart">
            <div class="row">

                        <div class="dropdown inline pull-right">
                            <a data-toggle="dropdown" class="btn btn-primary btn-xs" href="#"><span class="fa fa-chevron-down"></span></a>
                            <ul id="qty-selector" class="dropdown-menu dropdown-menu-right" role="menu">
                                <li>
                                    <a href="#" data-price="$<@= meal.price_six_pack @>" data-qty="6">
                                        <span class="item-price pull-left">$<@= meal.price_six_pack @></span>
                                        <span class="item-qty pull-right">Qty 6 or more</span>
                                        <span class="clearfix"></span>
                                        <span class="text-muted pull-left"><small>$<@=meal.price_discount@> per pack discount</small></span>
                                        <span class="text-warning pull-right"><small>Save <@=meal.price_discount_percent@>%</small></span>
                                        <span class="clearfix"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="pull-right">
                            <span class="item-qty">Qty:</span>
                            <input type="text" class="item-qty form-control" id="current-qty" name="qty" value="1" onchange="updateQty()">
                         <input type="hidden" name="buyid" value='<%=getCurrentAttribute("item","internalid")%>'>
                            <input type="hidden" name="showcart" value="T">
                        </div>

                        <div class="clearfix"></div>
                    </div>
                </div>

                <div class="col-md-5">
                    <button type="submit" id="add-to-cart-btn" class="btn btn-lg btn-block btn-info">Add to Cart</button>
                </div>
            </div>
 </form>

</script>   

The code below is not executing.

<script> 
        $("#add-to-cart-form").on('submit', function(event) {
         var form = $(this);  
          event.preventDefault(); 
          alert("testinggg")
          $.ajax('/app/site/backend/additemtocart.nl', {
           type: 'POST', 
           data: form.serialize(), 
           sucess: function(result) { }
          }); 
         });
       </script>

Answer 1

At some point you must be using the template to add the form element to the page. If the code that binds the submit event handler executes before that time, then the call to $("#add-to-cart-form") creates an empty jQuery object. You need that code to execute after the form element has been added to the page, or else use event delegation, like this.

$(document).on('submit', '#add-to-cart-form', function(event) {

This binds an event handler to the document (which always exists), but it will call the given function only when the event originated from an element that matches the given selector ('#add-to-cart-form').

Answer 2

At the first line

$("#add-to-cart-form")  

I mean add $ for it.