Woocommerce数量增量，按钮在AJAX刷新后不工作，只在单击2次后自动加载触发器。
Woocommerce数量增量，按钮在AJAX刷新后不工作，只在单击2次后自动加载触发器。
提问于 2017-11-20 12:54:05
我在这个话题上真的要疯了。很多人提供了解决方案，但没有人真正为我工作。我的场景可能与很多人相匹配：
我定制了WooCommerce数量输入(/全局/ quantity -input.php)，并将其添加到<input>中，以增加或减少数量字段中的数量：
<div class="quantity">
<input class="step-btn minus" type="button" value="-">
<input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
<input class="step-btn plus" type="button" value="+">
</div>我使用从我的jQuery加载的functions.php
jQuery(document).ready(function($){
$('.quantity .step-btn.plus').on('click', function() {
$input = $(this).prev('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
$input.val( val + step ).change();
});
$('.quantity .step-btn.minus').on('click', function() {
$input = $(this).next('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
if (val > 1) {
$input.val( val - step ).change();
}
});
});现在，在购物车页面上，我使用了这个小的jQuery片段，它也是从functions.php加载的，在更改数量之后自动重新加载AJAX：
jQuery('div.woocommerce').on('click', '.qty, .plus, .minus', function(){
jQuery('[name="update_cart"]').removeAttr('disabled');
});
jQuery('div.woocommerce').on('change', '.qty, .plus, .minus', function(){
jQuery('[name="update_cart"]').trigger('click');
});现在我的问题：
- AJAX只在
plus或/和minus上单击两次之后才重新加载。 - 在AJAX重新加载之后，按钮不再增加或减少。
在这里得到一些支持是很棒的！:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-11-20 20:00:00
第一个问题是：
AJAX只在
plus或/和minus上单击两次之后才重新加载。
问题是，我两次试图触发同一个对象。它首先执行disable，然后执行刷新，因为对于基本上相同的事情，我有两个不同的jQuery函数。
第二个问题是JS和Ajax的通用问题，它简单地扼杀了这个函数。对我来说起作用的是重新加载update_cart操作并重新初始化函数。请参阅下面的全部代码，测试和工作。我还添加了一个小的超时，以避免每次单击call：
function enable_update_cart() {
$('[name="update_cart"]').removeAttr('disabled');
}
function quantity_step_btn() {
var timeoutPlus;
$('.quantity .step-btn.plus').one().on('click', function() {
$input = $(this).prev('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
$input.val( val + step ).change();
if( timeoutPlus != undefined ) {
clearTimeout(timeoutPlus)
}
timeoutPlus = setTimeout(function(){
$('[name="update_cart"]').trigger('click');
}, 1000);
});
var timeoutMinus;
$('.quantity .step-btn.minus').one().on('click', function() {
$input = $(this).next('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
if (val > 1) {
$input.val( val - step ).change();
}
if( timeoutMinus != undefined ) {
clearTimeout(timeoutMinus)
}
timeoutMinus = setTimeout(function(){
$('[name="update_cart"]').trigger('click');
}, 1000);
});
var timeoutInput;
jQuery('div.woocommerce').on('change', '.qty', function(){
if( timeoutInput != undefined ) {
clearTimeout(timeoutInput)
}
timeoutInput = setTimeout(function(){
$('[name="update_cart"]').trigger('click');
}, 1000);
});
}
$(document).ready(function() {
enable_update_cart();
quantity_step_btn();
});
jQuery( document ).on( 'updated_cart_totals', function() {
enable_update_cart();
quantity_step_btn();
});woocommerce/global/quantity-input.php没有被碰过！
尽情享受
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47392550
复制相关文章
相似问题
腾讯云开发者
