javascript - 由于从输入触发的更改事件，复选框需要单击 2 次才能进行更改

Question

我有一个带有输入框和复选框的表格。输入框和复选框都具有更改事件处理程序：

 $('#myTable').on('change','.qty',function(){
    console.log(`CHANGE FIRED FROM THE INPUT BOX CHANGE EVENT`)
    //Other code
 
 })

 $('#myTable').on('change','.myCheckbox',function(){
    console.log(`CHANGE FIRED FROM THE CHECKBOX CHANGE EVENT`)
    //Other code
    
 })

现在，如果我继续并单击复选框而不对输入框进行任何更改，则复选框会立即得到一个复选标记，没有任何问题。

但是，如果我对输入框进行更改，然后单击复选框（即，在更改输入框后单击复选框之前，我没有单击 dom 内的任何位置），复选框不会单击并且什么也不做。此时，我看到控制台消息说：

从输入框更改事件触发的更改

但我没有从复选框检查事件中收到任何消息。如果我第二次按下复选框，则会显示复选标记。我知道更改事件仅在我进行更改并退出该输入框时才会触发，但为什么它的更改事件会阻止复选框被选中？

起初我认为这一定是一个事件传播问题，我必须停止事件传播到某个地方。因此，我在 qty 更改事件内的 console.log 行上添加了一个断点，通过向输入添加内容并单击复选框来触发更改，并检查调用堆栈。在它之前没有运行阻止复选框被选中的函数。

这是javascript的常规行为吗？如果没有，我完全感到困惑。有人可以帮我指出可能是什么问题吗？

标签： javascripthtmljquery