Альтернатива jQuery .trigger в нативном JS

Question

Суть проблемы: Необходимо вот эту строчку заменить на альтернативу в нативном JS. Строчка в jQuery работает с miniShop2, должна работать и в нативной версии. Подскажите, пожалуйста, как это сделать, пытался через dispatchevent(), но не вышло

$count.trigger('change')

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.dispatchEvent(new Event('change'));
            const 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:

Фронт:

Answer 1

Можете создать объект Event и вызвать его у нужного элемента:

const input = document.getElementById("blah");

input.onchange = (e) => console.log(e.target.value, "I'm fired");

const event = new Event('change');
input.dispatchEvent(event);

<input id="blah" />

БЛОГ НА HUSL

Альтернатива jQuery .trigger в нативном JS

Ответы (1 шт):