有没有办法将命令绑定到fadeIn事件而不必.trigger（'fadeIn'）？ [英] Is there a way to bind a command to fadeIn event without having to .trigger('fadeIn')?

问题描述

我有一个交互式表单系统，具有不同的模块，每个模块的表单都包含在不同的div元素中。当我从一个模块更改为另一个模块时，我经常这样做：

  $（'＃module_1'）hide 
 $（'＃module_2'）。fadeIn（）; 
  

我喜欢这样，但现在，在开发这个系统一段时间后，我有一些功能每次发生 fadeIn 时，我想要发生一个jqgrid重新初始化。我设置了这样：

  $（'＃module_2'）bind（'fadeIn'，function（） 
 initialize_jqgrid（）; 
}）; 
  

有没有办法让这项工作适用于 $的所有实例'＃module_2'）。fadeIn（）; 而不必去每个实例并替换它？

  $（ '＃module_2'）淡入（）触发（ '淡入'）。; 
  

这背后的动机只是要有更干净的代码， $（'＃ module_2'）。fadeIn（）。trigger（'fadeIn'）; 有点多余。

非常感谢！

解决方案

当然，

  var _old = $ .fn.fadeIn; 
 
 $ .fn.fadeIn = function（）{
 var self = this; 
 return _old.apply（this，arguments）.promise（）。done（function（）{
 self.trigger（fadeIn）; 
}）; 
}; 
 
 //和你的代码：//将.bind替换为.on如果jQuery 1.7+ 
 $（div）。bind（fadeIn，function（）{alert worky）;}）; 
 
 $（div）。fadeIn（2000）; 
  

演示

http://jsfiddle.net/gEVsX/2/

评论更新

  var _old = $ .fn.fadeIn; 
 
 $ .fn.fadeIn = function（）{
 return _old.apply（this，arguments）.trigger（fadeIn）; 
}; 
 
 //和你的代码：//将.bind替换为.on如果jQuery 1.7+ 
 $（div）。bind（fadeIn，function（）{alert worky）;}）; 
 
 $（div）。fadeIn（2000）; 
  

I have an interactive form system that has different modules, where the forms for each module is contained inside a different div element. When i change from one module to another, I often do this:

$('#module_1').hide();
$('#module_2').fadeIn();

I like this, but now, after developing this system for some time, I have some functions (like re-initialize a jqgrid) that I want to happen every time a fadeIn occurs. I set up this up like this:

$('#module_2').bind('fadeIn',function(){
    initialize_jqgrid();
});

Is there a way I can make this work for all instances of $('#module_2').fadeIn(); without having to go to every instance and replace it with this?

$('#module_2').fadeIn().trigger('fadeIn');

The motivation behind this is just to have cleaner code, $('#module_2').fadeIn().trigger('fadeIn'); is a little redundant.

Thanks a lot!

解决方案

Sure,

var _old = $.fn.fadeIn;

$.fn.fadeIn = function(){
    var self = this;
    return _old.apply(this,arguments).promise().done(function(){
        self.trigger("fadeIn");
    });
};

// and your code: // replace .bind with .on if jQuery 1.7+
​$("div").bind("fadeIn",function(){alert("worky");});

$("div").fadeIn(2000);​​​​​​​​​​​​​​​​​

Demo
http://jsfiddle.net/gEVsX/2/

Update for comment

var _old = $.fn.fadeIn;

$.fn.fadeIn = function(){
    return _old.apply(this,arguments).trigger("fadeIn");
};

// and your code: // replace .bind with .on if jQuery 1.7+
​$("div").bind("fadeIn",function(){alert("worky");});

$("div").fadeIn(2000);​​​​​​​​​​​​​​​​​

这篇关于有没有办法将命令绑定到fadeIn事件而不必.trigger（'fadeIn'）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！