jQuery $ el.trigger（'change'）不会触发本机侦听器 [英] jQuery $el.trigger('change') doesn't fire native listeners

问题描述

考虑以下HTML：

<select value="val2">
  <option value="val1">o1</option>
  <option value="val2">o2</option>
</select>

和JavaScript（在准备好文件时执行）：

And JavaScript (performed on document ready):

var $select = $('select');
var select = $select.get(0);

function logger(msg) {
    return function () { console.log(msg); };
}

$select.on('change', logger('jquery on select'));
$(document).on('change', logger('jquery on document'));

select.addEventListener('change', logger('native on select'), false);
document.addEventListener('change', logger('native on document'), false);

setTimeout(function () {
    console.log(' == programmatic ==');
    $select.trigger('change');
    console.log(' == now try manual ==');
}, 1000);

这导致控制台中的以下输出：

This results to the following output in the console:

 == programmatic ==
jquery on select
jquery on document
 == now try manual ==
jquery on select
native on select
jquery on document
native on document 

问题是：为什么本地绑定的听众没有被调用？如何调用它们？

The question is: why are natively bound listeners not called? How make them be called?

这里也是一个jsFiddle： http： //jsfiddle.net/PVJcf/

Here's also a jsFiddle: http://jsfiddle.net/PVJcf/

（使用jQuery 2.0.2）

(Using jQuery 2.0.2)

推荐答案

本文概述了该主题：

触发事件处理程序

Triggering Event Handlers

基本上，触发器只会触发通过jQuery附加的事件处理程序或html中的某些事件处理程序属性。

Basically, trigger will only fire event handlers attached through jQuery or certain event handler attributes in the html.

您可以定义一个插件来触发本机浏览器事件，如下所示：

You can define a plugin to trigger a native browser event like this:

(function($) {

    $.fn.trigger2 = function(eventName) {
        return this.each(function() {
            var el = $(this).get(0);
            triggerNativeEvent(el, eventName);
        });
    };

    function triggerNativeEvent(el, eventName){
      if (el.fireEvent) { // < IE9
        (el.fireEvent('on' + eventName));
      } else {
        var evt = document.createEvent('Events');
        evt.initEvent(eventName, true, false);
        el.dispatchEvent(evt);
      }
}

}(jQuery)); 

// sample usage
$('select').trigger2('change');

这不是完美的，但应该给你一般的想法。

This is not perfect but should give you the general idea.

以下是使用此插件的小提琴更新。

这篇关于jQuery $ el.trigger（'change'）不会触发本机侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！