Javascript AJAX刷新后按钮不起作用的Woocommerce数量增量,自动加载仅在单击2次后触发
在这个话题上我真是疯了。很多人提供了解决方案,但没有一个真正适合我。我的情景可能与许多人相匹配: 我定制了商业数量输入(/global/quantity input.php),并添加到Javascript AJAX刷新后按钮不起作用的Woocommerce数量增量,自动加载仅在单击2次后触发,javascript,jquery,ajax,wordpress,woocommerce,Javascript,Jquery,Ajax,Wordpress,Woocommerce,在这个话题上我真是疯了。很多人提供了解决方案,但没有一个真正适合我。我的情景可能与许多人相匹配: 我定制了商业数量输入(/global/quantity input.php),并添加到以增加或减少数量字段中的金额: <div class="quantity"> <input class="step-btn minus" type="button" value="-"> <input type="number" step="<?php echo
以增加或减少数量字段中的金额:
<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加载的,用于在更改数量后自动重新加载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');
});
现在我的问题:
加号
或/和减号
后重新加载加号
或/和减号
后重新加载
这里的问题是,我试图触发同一个物体两次。它首先执行disable
,然后执行刷新,因为我有两个基本相同的jQuery函数
第二个问题是JS和Ajax的一般问题,它基本上破坏了函数。对我来说,有效的方法是重新加载update\u cart
操作并重新初始化函数。请参阅下面经过测试和运行的完整代码。我还为每次单击时不调用AJAX添加了一个小超时:
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
享受第一个问题:
AJAX只在单击两次加号
或/和减号
后重新加载
这里的问题是,我试图触发同一个物体两次。它首先执行disable
,然后执行刷新,因为我有两个基本相同的jQuery函数
第二个问题是JS和Ajax的一般问题,它基本上破坏了函数。对我来说,有效的方法是重新加载update\u cart
操作并重新初始化函数。请参阅下面经过测试和运行的完整代码。我还为每次单击时不调用AJAX添加了一个小超时:
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
享受