当从增加和减少按钮改变值时，如何检测ajax的变化?

Question

当我手动更改输入字段值而不使用ajax按钮或代码检测更改并更新数据时，没有任何问题。

我提出的唯一问题是增加和减少按钮，ajax不检测从按钮修改后输入字段值的变化，它不更新数据。

这是我完整的代码，我已经注释了ajax的东西，使按钮在这里工作。

$(function() {
$('.min').click(function(){
var currentVal = parseInt($(this).siblings(".quantity").val());
if (currentVal != 1) {
$(this).siblings(".quantity").val(currentVal - 1);
}
});
$('.plus').click(function(){
var currentVal = parseInt($(this).siblings(".quantity").val());
$(this).siblings(".quantity").val(currentVal + 1);
});
/*$(document).ajaxStop(function(){
$('.min').click(function(){
var currentVal = parseInt($(this).siblings(".quantity").val());
if (currentVal != 1) {
$(this).siblings(".quantity").val(currentVal - 1);
}
});
$('.plus').click(function(){
var currentVal = parseInt($(this).siblings(".quantity").val());
$(this).siblings(".quantity").val(currentVal + 1);
});
$(this).find('.quantity').keyup(function(evt) {
evt.preventDefault();
var formData = [];
$('input[name^="qtyupdate"]').each(function() {
formData.push(this.value);
});
var formData = $(this).serializeArray();
var url = "item_cart.php";
$.ajax({
url: url,
type: "POST",
data: formData,
cache: false,
})
.done(function(data) {
let res = JSON.parse(data);
if(res.status){
$("#wrapp-basket").load(" #wrapp-basket").fadeIn('slow');
$("#qty").load(" #qty").fadeIn('slow');
$('.alert-success').fadeIn();
$('.alert-success').html(res.message).delay(2000).fadeOut(2000);
} else {
$('.alert-danger').fadeIn();
$('.alert-danger').html(res.message).delay(2000).fadeOut(2000);
}
})
.fail(function( jqXHR, textStatus ) {
console.log(jqXHR.responseText);
console.log("Request failed: " + textStatus );
})
});
});*/
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="bsk-quantity">
<input type="text"
name="qtyupdate[1][color-blue][XXL]"
value="1"
class="quantity"
autocomplete="off"
data-validation="number"
data-validation-allowing="float">
<input type="button" value="+" class="plus">
<input type="button" value="-" class="min">
</div>
<div class="bsk-quantity">
<input type="text"
name="qtyupdate[1][color-red][XL]"
value="1"
class="quantity"
autocomplete="off"
data-validation="number"
data-validation-allowing="float">
<input type="button" value="+" class="plus">
<input type="button" value="-" class="min">
</div>

那么我需要添加什么更改来使ajax中的更改既可以手动工作，也可以增加和减少按钮?

Answer 1

您可以在输入上使用trigger(eventName)，以便它执行与用户手动触发事件时相同的ajax

简化的例子:

$('.btn-increment').click(function() {
const $btn = $(this),
isPlus = $btn.hasClass('plus'),
$qty = $(this).siblings(".quantity");
let currVal = +$qty.val();
const newVal = isPlus ? ++currVal : currVal > 1 ? --currVal : currVal;
$qty.val(newVal).trigger('input');
});

$('.quantity').on('input', function(evt) {
console.clear()
console.log('Do ajax value = ', this.value);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="bsk-quantity">
<input type="text" name="qtyupdate[1][color-blue][XXL]" value="1" class="quantity" autocomplete="off" data-validation="number" data-validation-allowing="float">
<input type="button" value="+" class="btn-increment plus">
<input type="button" value="-" class="btn-increment min">
</div>
<div class="bsk-quantity">
<input type="text" name="qtyupdate[1][color-red][XL]" value="1" class="quantity" autocomplete="off" data-validation="number" data-validation-allowing="float">
<input type="button" value="+" class="btn-increment plus">
<input type="button" value="-" class="btn-increment min">
</div>