jQuery 仅在附加了 jQuery 时才会触发 keyup 事件

Posted 2023-05-07

【中文标题】jQuery 仅在附加了 jQuery 时才会触发 keyup 事件

【英文标题】：jQuery triggers keyup event only if it was attached with jQuery

【发布时间】：2011-09-17 22:19:52

【问题描述】：

使用 jQuery 触发 keyup 事件真的搞砸了。

这是一个干净的例子

http://jsfiddle.net/xQcGM/2/

当我输入任何 input 时，它们都会触发事件，但是当我尝试以编程方式 ($(element).trigger('event')) 触发它时，只会触发第二个事件，但我希望两者都发生。

我错过了什么？

UPD 我无法更改处理程序的附加方式！

【问题讨论】：

“当我尝试以编程方式触发它时” - 你是什么意思？

好问题。但是，顺便说一句，你为什么要混合你的事件绑定？还是不同的脚本文件使用了不同的事件绑定方式？

@Webars 编程 = $(element).trigger('event')

所以以与第一个相同的方式附加第二个函数。

@David Hoerster，我实际上已经绑定了事件并想从 chrome 扩展中触发它。刚刚添加了第二个来强调问题。也许我不应该。

【参考方案1】：

触发事件的原生方式是调用dispatchEvent。不幸的是，这种方法在jQuery's source 的任何地方都没有出现。所以我猜你必须自己创建事件对象并手动调度它们。

这是一个更长的版本，带有一个有效的example。

$('button').click(function() 
        var myEvent = document.createEvent('KeyboardEvent');
        myEvent.initKeyboardEvent('keyup', true, true, null, false, 
                                false, false, false, 76, 0);
        $('input').each(function() 
            this.dispatchEvent(myEvent);
        );
    );

或者您可以查看 jQuery simulate plugin，这会稍微容易一些。这是一个较短的版本，还有另一个工作 example。

$('button').click(function() 
    $('input').simulate('keyup');
);

【讨论】：

谢谢，现在很清楚了。这不是必需的，但也许我可以以某种方式扩展 jQuery 触发器功能，它会在里面做那些假的KeyboardEvents？

trigger 的来源我没看过，但是用自己的代码替换它是相当的easy。但是，您必须处理将 DOM 事件规范化为 jQuery 事件的问题，以确保所有其他事件处理正常工作，在该事件对象上设置正确的属性，并处理跨浏览器问题。解决方案不像创建一个包装器那么简单，它直接调度 DOM 事件，然后调用 jQuery 的实现，因为在这种情况下，相同的事件将被触发两次——一次用于元素上的所有事件，一次用于 jQuery 绑定事件