Jquery.点击事件不'更改事件后无法工作

Jquery. click event doesn't work after change event?

本文关键字：事件 工作 Jquery      更新时间：2023-09-26

具有以下示例代码：

<input type="text" id="changeid">
<a href="#" id="clickb">click</a>
<script>
    $('#clickb').on("click", function(event){
        alert(1);                             
        return false;
    });
    $('#changeid').on("change", function(event){
        alert(2);                             
        return false;
    });
</script>

当将内容放入文本字段并立即单击链接时，只会触发onchange事件，而不会触发链接单击事件。为什么？更改事件似乎正在阻止单击事件？

它被alert阻止。将alert更改为console.log，您会发现两个事件都已激发。

演示 

$('#clickb').on("click", function(event){
    console.log(1);
    return false;
});
$('#changeid').on("change", function(event){
   console.log(2);                             
   return false;
});​

当您编辑输入并点击链接时，内部会发生以下情况

  1. 您开始点击"链接"。还没有生成任何事件（甚至没有鼠标按下），因为首先浏览器将执行一些清理工作：
  2. 输入失去焦点并将引发blur事件
  3. 输入引发change事件，因为它引发了blur并且值已更改
  4. change事件回调打开alert(2)
  5. 新窗口出现后，文档失去焦点
  6. 链接将永远不会经历click

解决方案是不使用alert（正如xdazz建议的那样）。

使用此

$("#changeid").live('change', function () ...

onchange事件只有在元素模糊后才会触发。因此，当你键入一些文本并首先点击链接时，文本字段上的元素会变得模糊。处理更改事件的最佳方法是使用onkeyup事件来跟踪对文本字段所做的更改。

相关文章：