Аналог .trigger() в нативном JS в miniShop2
Здравствуйте! Подскажите, пожалуйста, может кто-то знает, в чем беда. Столкнулся с такой проблемой: необходимо переписать код jQuery в нативный. Код считывает нажатие на кнопки + или -, тем самым меняет кол-во товара в корзине. Это все работает с miniShop2. Код переписал, работает все кроме того, что цена в итоговой сумме не меняется) Мое предположение, что не работает из-за строчки
Весь код jQuery:
Код JS:
HTML:

$count.trigger('change');Пробовал переписать так: let event = new Event('change');
simularInputElement.dispatchEvent(event);Безуспешно. Весь код jQuery:
$(document)
.on('click touchend', '.input-group-text', function (e) { // input-group-text - кнопки plus/minus
e.preventDefault();
var $container = $(this).closest('.input-group'),
$count = $container.find('[name="count"]'),
num = $count.val();
if (isNaN(num) === false) { // страховочка от, например, пустого поля
num = parseInt(num, 10);
switch ($(this).data('count')) { // соответственно, у кнопок должен быть атрибут data-ms2-count="plus или minus"
case 'plus':
num = num + 1;
$count.val(num);
break;
case 'minus':
if (num <= 1) return;
num = num - 1;
$count.val(num);
break;
}
} else {
return false;
}
$container.find('.cart-label-count').text(num);
$count.trigger('change'); // инициализируем отправку на сервер.
})
.on('change keypress keyup', '.ms2_form [name="count"]', function() {
if ($(this).val().match(/\D/)) {
console.log('тут');
console.log($(this));
this.value = $(this).val().replace(/\D/g,''); // следим на лету, чтобы в поле были только цифры
}
if (parseInt($(this).val(), 10) < 1) {
console.log('тут2');
console.log($(this));
this.value = 1; // следим на лету, чтобы в поле было не меньше единицы
}
});Код JS:
function Bs5InputCount(selector, params = {}) {
selector.forEach(n => {
const simularInputElement = n.closest('.input-group').querySelector('input');
n.addEventListener('click', () => {
//n.preventDefault();
let num = parseInt(simularInputElement.value);
switch (n.getAttribute('data-count')) {
case 'plus':
if (parseInt(simularInputElement.getAttribute(params.dataMax)) > num && simularInputElement.getAttribute(params.dataMax) != null) {
num = num + 1;
simularInputElement.value = num;
} else if (simularInputElement.getAttribute(params.dataMax) == null) {
num = num + 1;
simularInputElement.value = num;
}
break;
case 'minus':
if (parseInt(simularInputElement.getAttribute(params.dataMin)) < num && simularInputElement.getAttribute(params.dataMin) != null) {
num = num - 1;
simularInputElement.value = num;
} else if (simularInputElement.getAttribute(params.dataMin) == null) {
num = num - 1;
simularInputElement.value = num;
}
break;
}
console.log(simularInputElement);
// document.dispatchEvent(new Event("change"));
// simularInputElement.dispatchEvent(new Event("change"));
// document.dispatchEvent(new Event('change'));
// simularInputElement.dispatchEvent(new Event('change'));
let event = new Event('change');
simularInputElement.dispatchEvent(event);
}
)
simularInputElement.addEventListener('keyup', () => {
if (parseInt(simularInputElement.value) < parseInt(simularInputElement.getAttribute(params.dataMin))) {
simularInputElement.value = simularInputElement.getAttribute(params.dataMin);
} else if (parseInt(simularInputElement.value) > parseInt(simularInputElement.getAttribute(params.dataMax))) {
simularInputElement.value = simularInputElement.getAttribute(params.dataMax);
}
})
})
}
Bs5InputCount(document.querySelectorAll('[data-count]'), {
dataMin: 'data-min',
dataMax: 'data-max',
})HTML:

Комментарии: 13
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Можно попробовать событие вешать на форму, а не на инпут
Если честно, про bubbles сам не особо понимаю, просто опытным путём выяснил, что так работает)