javascript文本输入更改事件未触发答案

【问题标题】：javascript text input change event not firingjavascript文本输入更改事件未触发
【发布时间】：2011-01-13 21:52:34
【问题描述】：

我有一个文本类型输入字段和一个复选框。如果我更改文本然后在输入框外部单击（或按 Enter 或 Tab），则会引发更改事件。但是如果我输入一些文本然后用鼠标直接点击复选框，似乎只有复选框更改事件被抛出。

我有以下代码：

<input type="text" name="text" class="update">
<input type="checkbox" name="check" class="update">

还有这个 jQuery：

$('.update').change(function(){
    console.log($(this));
});

这是一个已知问题吗？如何确保在此设置中触发/抛出/捕获所有更改事件？

【问题讨论】：

该代码是否在 $(document).ready(function());功能？您可以尝试在函数中放置一个 alert() 以查看您是否正在点击该函数。
奇怪。必须进行其他操作，因为我的测试可以从更改的文本输入单击复选框jsfiddle.net/tbeseda/UCtyb
你确定吗？我复制了 HTML/JS，当我在文本框中输入内容然后单击复选框时，可以看到这两个事件都触发了。
你同时调用了同一个事件，所以其中一个调用会响应，只需更改文本框上的事件并用jQuery单独调用它
好的，所以肯定有别的事情发生了，你说得对。我会做更多的测试。实际上我使用这些事件来触发一个 ajax 调用，并且这些 ajax 调用中似乎只有一个被执行了..所以我“认为”这是事件没有触发，但问题可能出在其他地方..

【解决方案1】：

要触发用户更改，请使用输入事件：

$('input').on('input',function(){...})

要触发代码更改，请使用 DOMSubtreeModified 事件：

$('input').bind('DOMSubtreeModified',function(){...})

如果您想触发用户和代码更改：

$('input').bind('input DOMSubtreeModified',function(){...})

DOMSubtreeModified 事件被标记为已弃用，有时会占用大量 CPU 时间，但如果小心使用，它也可能非常高效...

【讨论】：

【解决方案2】：

我不确定我是否明白。但是对我来说，当我尝试输入文本字段然后用鼠标单击复选框时，两个事件都会被触发。但是您必须记住，文本输入的事件“更改”意味着该输入必须失去焦点，只要字段被聚焦，就不会触发任何更改事件。这可能是你的情况。复选框/单选框的工作方式不同。无需分散注意力。

干杯。

【讨论】：

【解决方案3】：

因为您正在收听更新类，所以两者都会触发 change 事件。

【讨论】：

【解决方案4】：

除非输入焦点切换到其他控件，否则不会触发更改事件

【讨论】：