javascript - 我可以使用 .trigger ("change") 来在事件处理程序完成之前更新复选框吗？

Question

基本上，我有一个包含一堆项目的网格，所有这些项目的左侧都包含一个复选框。这些复选框绑定(bind)到我称为 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;
    }
}

我不确定这是否正是您要找的。如果这与您的预期相去甚远，请告诉我。

注意:注释在代码本身内嵌