【问题标题】:Use jQuery functions as event使用 jQuery 函数作为事件
【发布时间】:2012-05-25 10:38:02
【问题描述】:

我想知道是否可以将回调附加到 jQuery 以进行 dom 操作:

  • 追加
  • 前置
  • 添加类
  • 切换类
  • 删除类
  • 有效
  • 文字
  • CSS
  • 属性
  • html
  • 隐藏

类似于新事件的东西。

例子:

$('#mydiv').bind('hide', function(){
    console.debug('someone call hide function')
});

//then in other js file, other function, anywhere.
$('#mydiv').hide();
//hide and output 'someone call hide function'

我查看了.queuejQuery.Callback,但只有我为这些函数制作了自己的包装器才能工作?

也许是 jQuery 插件?

这可以在不改变我所有的js调用这个插件的情况下完成吗?不是这样的:

$('#mydiv').myPluginsHide();

谢谢。

【问题讨论】:

  • 你可以用你自己的实现覆盖这些函数,即触发一个事件并调用原始函数。

标签: javascript jquery jquery-callback


【解决方案1】:

我不知道有什么内置功能可以做到这一点,但您可以通过迭代 jQuery.fn 自己来完成(即您将按照 Felix Kling 的建议覆盖这些函数):

var callbacks = {};
var excluded = ['constructor','init','jquery'];
for ( var key in $.fn ) {
    var orig = $.fn[key];
    if ( !orig instanceof Function || excluded.indexOf(key) != -1 )
        continue;
    (function(key,orig) {
        callbacks[key] = []; // This is the list of callbacks for this function
        $.fn[key] = function() {
            var ret = orig.apply(this,arguments); // Applies the function normally
            var elements = this, args = arguments;
            callbacks[key].forEach(function(f) { f(elements, args); }); // Calls each callback
            return ret;
        };
    })(key,orig);
}

然后你只需要添加/删除回调到callbacks对象中的相应条目。

更新:不知道我在这里缺少什么,但无法使 example 工作。 (编辑:啊,忘记将变量包装在闭包中的经典错误......它现在应该可以工作了。还添加了一个 excluded 列表,用于必须不的函数strong> 被覆盖)。

【讨论】:

  • 您犯了一个在循环内创建闭包的常见错误。对于您创建的每个函数,orig 将引用循环中分配的最后一个值。
  • @FelixKling lol 刚刚意识到错误,正在更新代码(原始代码使用 $.each 而不是循环)。现在应该可以正常工作了! :)
  • 谢谢,这解决了我的问题。我喜欢 @jcreamer898 建议的 Deferred 之类的“jquery 解决方案”,但我不知道如何获得 Defered,除非我调用方法。
【解决方案2】:

你也许可以研究一下 jQuery.Deferred...我认为它是这样的...

$(function(){
    $.when($('#one').hide('slow'))
        .then(function () { 
            $('#two').hide('slow') 
        })
        .then(function () { 
            $('#three').hide('slow')
        });
});

http://api.jquery.com/category/deferred-object/

【讨论】:

  • $.when$.ajax 一起工作,因为该函数返回一个Deferredthen 代码将在 ajax 请求完成时运行,而不是在它启动时运行)。但是大多数 jQuery 函数会立即执行,并且不会返回延迟,所以这种解决方案在这种情况下不起作用。
  • 啊,我现在明白了,hide 的返回值 both 是一个 jQuery 对象(所以你可以在它上面链接调用)和一个 Deferred(所以如果你像这样使用它,Promise 将在过渡效果完成时运行)。不知道,谢谢指出!
  • 对我有用。但是当其他脚本调用 .hide() 时,我怎样才能让延迟观看
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-08-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-05-05
  • 1970-01-01
  • 2012-05-06
相关资源
最近更新 更多