使用类刷新将事件处理程序附加到所有span元素的直接父元素

时间:2013-04-30 06:56:38

标签: jquery html css

我再来这里寻求帮助,我很感激建议。

我有一个小项目可以继续。我需要的是使用jQuery来查找具有类刷新的所有span元素,并将单击处理程序附加到其直接父级。我可以使用jQuery的bind()但是我们知道它不适用于将来添加的元素。如果我在旧的黄金时代,我会使用live(),但由于它已被弃用,我不能使用它。

我的另一个选择是使用委托函数但是使用委托函数我无法传递选择器参数。

这是我的小提琴。 http://jsfiddle.net/ardeezstyle/hRhT7/2/

$('.refresh').parent().bind('click',function(){
             $(this).css({'position':'relative','background':'#fff'}).append('<span>').find('span:last').addClass('refreshing');

        _this=$(this);
    setTimeout(function(){
        _this.removeAttr('style').find('span.refreshing').remove();
    }, 1000);

});

我将不胜感激。

干杯!

2 个答案:

答案 0 :(得分:1)

在委派活动中使用

var parentID=$('.refresh').parent().attr('id'); // using id of parent.. you can get any attributes of parent here...if id is not present..
$(document).on('click','#'+parentID,function(){
   $(this).css({'position':'relative','background':'#fff'}).append('<span>').find('span:last').addClass('refreshing');

    _this=$(this);
   setTimeout(function(){
    _this.removeAttr('style').find('span.refreshing').remove();
   }, 1000);

});

最好使用文档中最接近的静态父容器,然后使用文档本身以获得更好的性能.. link以阅读有关事件的更多信息

答案 1 :(得分:0)

由于没有类的父级选择器,您必须将处理程序委托给每个元素,并在事件发生时检查它是否是父级。

$(document).on('click', '*', function() {
    if ($(this).children('.refresh').length) {
       // do stuff
    }
});