时间戳

首页 > 解决方案 > click 事件不会在 ajax 加载的对象上触发

javascript - click 事件不会在 ajax 加载的对象上触发

问题描述

我正在使用 ajax 填充我的购物车。在购物车中，我有一个带有加号和减号按钮的数量字段。这是按钮的代码：

  <div class="cart-quantity">
                <input type='button' value='+' class='qtyplus CartCount' field='updates_{{ item.id }}' />
<input name="updates[]" id="updates_{{ item.id }}" class="quantity CartCount" value="{{ item.quantity }}" />
      <input type='button' value='-' class='qtyminus CartCount' field='updates_{{ item.id }}' />
  </div>

这是通过加号/减号按钮更新数量字段的javascript：

// This button will increment the value
$('.qtyplus').on("click", function(){
    // Stop acting like a button

    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[id='+fieldName+']').val());
    // If is not undefined
    if (!isNaN(currentVal)) {
        // Increment
        $('input[id='+fieldName+']').val(currentVal + 1);
    } else {
        // Otherwise put a 0 there
        $('input[id='+fieldName+']').val(0);
    }
    e.preventDefault();
$(this).closest('form').submit();
});
// This button will decrement the value till 0
$(".qtyminus").on("click",function() {
    // Stop acting like a button

    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[id='+fieldName+']').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 0) {
        // Decrement one
        $('input[id='+fieldName+']').val(currentVal - 1);
    } else {
        // Otherwise put a 0 there
        $('input[id='+fieldName+']').val(0);
    }
    e.preventDefault();
$(this).closest('form').submit();
});

如您所见，我已尝试将单击事件更改为单击，但仍然无法正常工作。有任何想法吗？

标签： javascriptjquery

解决方案

与其直接将click事件绑定到.qtyplus，不如尝试：

$(document).on('click', '.qtyplus', function() { /* ... */ });

为了获得更好的性能，不要将其绑定到 ，而是document使用最接近的.qtyplus元素父级。

推荐阅读