JavaScript jQuery 少见的 bind 写法

hz_qiuyuanxin · March 06, 2013 · Last by ashchan replied at March 12, 2013 · 3724 hits
$(element).bind('ajax:success',function(e){
    // ...
});

我上api.jquery.com,都找不到有这样的介绍,哪位大侠能指出它的出处啊!

真的找不到文档嘛? http://jqapi.com/#p=bind 就算找不到文档,还可以 fallback 到源码里面去查一下嘛。

#1 楼 @lgn21st 不是说找不到 bind,而是 "ajax:success",一般常见的都是 "click" 之类的,没见过 ajax 的 success 事件可以这样绑定的

#2 楼 @hz_qiuyuanxin 原来是这样,但是你的帖子上没有说清楚呀。 ajax:success是一个自定义 event,不是标准的 DOM Event。具体工作原理看这里 https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L119

事件驱动模型嘛 ajax 还有 error 事件呢 其实你可以去查阅 jquery 的 ajax 方面的 api 举一反三

#3 楼 @lgn21st 原来是 jquery_ujs 的,吭啊!谢谢大侠指点啦!!

#5 楼 @hz_qiuyuanxin 我记得当时 Rails 从 Prototype 切换到 jQuery 的时候,这一手做法被广泛宣传,所以我以为是人尽皆知的东西。

#6 楼 @lgn21st 小弟那时候才刚接触 rails,而且相当长一段时间还是用 prototype,不过还是自己学习不够,让大侠见怪啦。。

bind 都不用了,现在语法糖都是用 on 啊。

嗯,on 可以处理一切事件绑定了,现在的 jquery_ujs 文件也都是用 on。这都出了好久了,不过我前段时间才晓得……这是我整理的一篇 jQuery 事件绑定函数的区别,希望有用。 http://darkbaby123.github.com/blog/2013/02/24/the-difference-jquery-event-binding-methods/

#9 楼 @xds2000 bind 只绑已经存在的 dom elements,就凭这一点大部分 js 动态页面都应该用 on:)

#9 楼 @xds2000 还是 on 这样的语法可读性更好。

#11 楼 @ashchan 后增加的可以用 live 啊,HOHO,不过 bind 无法绑定 hover 事件,求解

#13 楼 @i5ting 发现好像 live 不能用了,要换成 on 了

#13 楼 @i5ting live 早就 deprecate 掉了。

hover 一直正常的啊。你可以试试这个帖子本身的页面,打开 Web Inspector,给每个回帖绑个 hover:

$('.reply').hover(
  function() { $(this).css('background', 'red'); },
  function() { $(this).css('background', 'green'); }
);

然后鼠标移过每个回帖看背景色变化。

#16 楼 @ashchan

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        

是我记错了,谢谢

#16 楼 @ashchan 我知道这样用,我是说能用 on(‘hover’,function(){})这样的么?

#18 楼 @i5ting

http://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover

貌似只能这样

$(document).on(
{
    mouseenter: function() 
    {
        //stuff to do on mouseover
    },
    mouseleave: function()
    {
        //stuff to do on mouseleave
    }
}
, '.selector'); //pass the element as an argument to .on

#12 楼 @cisolarix on 的另一个好外是可以只绑定一个事件到外围元素上。 #18 楼 @i5ting 可以的啊:

$('.items').on('hover', '.reply', function() {
  $(this).css('background', 'red');
});

不过要做到划进和划出触发不同的效果似乎不太直接。

#20 楼 @ashchan 我正在听 teahour 第 6 期你的 talk

You need to Sign in before reply, if you don't have an account, please Sign up first.