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

По сути, у меня есть сетка, содержащая кучу элементов, и все эти элементы содержат флажок слева. Эти флажки связаны с функцией, которую я назвал 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") в этом контексте или я неправильно об этом думаю?

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

javascript jquery checkbox triggers

10.06.2019 21:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

116

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

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

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

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

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

10.06.2019 21:50

Ответ принят как подходящий

Вместо того, чтобы зависеть от другого класса .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;
    }
}

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

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

Оказывается, единственное, что мне нужно было, чтобы мой код работал так, как я хотел, — это изменение с click на change. Спасибо!

— 10.06.2019 22:44

10.06.2019 21:56