Могу ли я использовать .trigger («изменить»), чтобы обновить флажок перед завершением обработчика событий?

Question

По сути, у меня есть сетка, которая содержит кучу элементов, и все эти элементы содержат флажок слева.Эти флажки связаны с функцией, которую я назвал ecuDataBound(), которая содержит обработчики событий, которые вызывают функцию с именем onChangeECU.Я заметил, что состояние активируемого флажка не выполняется до тех пор, пока обработчик события не завершит свою работу полностью - мне интересно, есть ли способ преждевременно изменить состояние флажка.

В частности, я прочитал кое-что о функции .trigger("change"), которая могла бы быть тем, что я искал, но я не уверен, что я использую это правильно или для правильной проблемы.

function ecuDataBound() {
    $('#ECUs .k-checkbox:not(:first)').on('click', onChangeECU);
}

function onChangeECU(arg) {
    // ...
    grid.trigger("change");
    isSelected = checkForSelection("#ECUs");
    // ...
}

function checkForSelection(gridID) {
    const inputString = gridID + " tr.k-state-selected";
    const isSelected = $(inputString).length;
    if (isSelected) {
        return true;
    }

Поскольку состояние флажков не обновляется до тех пор, пока его обработчик событий не будет полностью завершен, функция checkForSelection не будет работать так, как предназначено для первого запуска.,Могу ли я использовать .trigger("change") в этом контексте или я думаю об этом неправильно?

Пожалуйста, дайте мне знать, если я сформулировал это неправильно, и если мне нужно уточнить какие-либо подробности.Спасибо!

Answer 1

Вместо зависимости от другого класса .k-state-selected Я бы посмотрел прямо на флажок.Вы сказали, что флажок содержится в строке.Так что вы, вероятно, можете сделать что-то вроде этого:

function ecuDataBound() {
    // change trigger from 'click' to 'change'
    $('#ECUs .k-checkbox:not(:first)').on('change', onChangeECU);
}

function onChangeECU(arg) {
    // ...
    // remove trigger
    // grid.trigger("change");
    isSelected = checkForSelection("#ECUs");
    // ...
}

function checkForSelection(gridID) {
    // change " tr.k-state-selected"
    const inputString = gridID + ' .k-checkbox:checked';
    // good idea to turn into actual boolean with > 0 check
    const isSelected = $(inputString).length > 0;
    if (isSelected) {
        return true;
    }
}

Я не уверен, что это именно то, что вы ищете.Пожалуйста, дайте мне знать, если это не так, и это далеко от того, что вы ожидаете.

ПРИМЕЧАНИЕ: Комментарии встроены в сам код

Answer 2

Вместо записи click s на каждом флажке рассмотрите возможность использования делегирования события.Идея состоит в том, чтобы захватить click на родительском элементе.Тогда состояния флажков будут сохранены.

Вот одно решение с использованием простого JavaScript:

document.querySelector('#ECUs').addEventListener('click', doIt);

function doIt() {
  let checked = document.querySelectorAll('#ECUs input:checked');
  checked.forEach(c => console.log(c.value));
}

<div id="ECUs">
  <input type="checkbox" value="1">Check 1
  <input type="checkbox" value="2">Check 2
</div>

Пожалуйста, дайте мне знать, где я неверно истолковал ваш вопрос.