Код jquery не выполняется Проблема с шаблоном

Question

Я никогда не работал с шаблоном jquery, но мой код формы («# add-to-cart-form»). On ('submit', function (event) (код ниже) не выполняется, я считаю, что это должен делать с шаблоном. Когда я запускаю мой код в консоли он прекрасно работает.

<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> 

Приведенный ниже код не выполняется.

<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

В какой-то момент вы должны использовать шаблон, чтобы добавить элемент формы на страницу. Если код, который связывает обработчик событий отправки, выполняется до этого времени, тогда вызов $("#add-to-cart-form") создает пустой объект jQuery. Вам нужно, чтобы этот код выполнялся после того, как элемент формы был добавлен на страницу, или же используйте делегирование событий, как это.

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

Это связывает обработчик событий документа (который всегда существует), но он будет вызывать данную функцию только тогда, когда событие происходит от элемента, который соответствует данной селектор ('# добавить к cart- форма ').

Answer 2

на первой line

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

Я имею в виду добавить $ для него.