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

这会将事件处理程序绑定到文档（始终存在），但只有当事件源自与给定选择器匹配的元素时才会调用给定函数（＆＃39; #add-to-cart-form＆＃39;）

Answer 2

在第一行

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

我的意思是为它添加$。

jquery代码不执行模板问题

2 个答案: