Question

我已将一个点击处理程序附加到围绕我的无线电输入的div。单击div时，它会设置收音机的已检查状态，但是我还想触发绑定到该收音机的所有事件。可能有多个模块绑定到它，它们可能会对模糊，更改，单击，dblclick，焦点，悬停等进行绑定。

现在我可以使用以下代码：

$('.form-type-radio').click(function(){
    $(this).find('input').attr('checked', 'checked').trigger('blur').trigger('change').trigger('click').trigger('dblclick').trigger('focus').trigger('hover');
});

但实际上我想要一种更简洁的方法 - .trigger('all')将是完美的。

有办法做到这一点吗？

Answer 1

不是我推荐的东西，但也许是这样的东西

$.fn.triggerAll = function(exclude) {
    return this.each(function() {
        for (var key in this) {
            if (key.indexOf('on') === 0) {
                var ev = key.replace('on','');
                if ($.inArray(ev, exclude) == -1) {
                    $(this).trigger(ev);
                }
            }
        }
    });
};

像

一样使用

$('.form-type-radio').click(function(e){
    $(this).triggerAll(['click', 'mousedown']); // events not to trigger
});

FIDDLE

我添加了一个选项来传递要排除的事件数组以避免递归问题。

Answer 2

或者你可以这样做：

DEMO jsFiddle

 $('.form-type-radio').click(function (e) {
     if(e.target != this) return;
     var input = $(this).find('input')[0],
         inputEvents = $._data(input, 'events');
     $.each(inputEvents, function (k, o) {
         $(input).triggerHandler(k);
     });
 });

如果DIV包含的输入不止一个，请使用for循环：

DEMO jsFiddle

$('.form-type-radio').click(function (e) {
     if (e.target != this) return;
     var inputs = $(this).find('input').get();
     for (var i = 0, z = inputs.length; i < z; i++) {
         var inputEvents = $._data(inputs[i], 'events');
         $.each(inputEvents, function (k, o) {
             $(inputs[i]).triggerHandler(k);
         });
     }
 });

注意：这仅适用于使用jQuery绑定的事件。

Answer 3

我认为没有jQuery函数可以做到这一点。一个简单的解决方案是向对象添加一个新事件，触发所有其他事件。通过这种方式，您可以控制要触发的事件，但不必每次都触发它们。类似的东西：

$('input').on('all', function () {
    $(this)
        .trigger('blur')
        .trigger('change')
        .trigger('click')
        .trigger('dblclick')
        .trigger('focus')
        .trigger('hover');
});
$('input').trigger('all');

触发绑定到元素的所有jQuery事件

3 个答案: