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

我再次来到这里寻求帮助，我很感激您的建议。将事件处理程序附加到刷新类的所有span元素的直接父元素

我有一个小型项目工作。那么我需要的是使用jQuery通过类刷新来查找所有span元素，并将一个click处理程序附加到它的直接父级。我可以使用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); 

});

我将不胜感激任何帮助。

干杯！

来源

2013-04-30 Rupam Datta

您可以将选择器传递给'bind'或'on'。问题是没有父母的选择。你确定你不能给这些父母上课吗？ – Barmar 2013-04-30 07:00:19

@Barmar感谢您查看我的问题并试图找到解决方案。是的，我确定我无法给父母上课。 – 2013-04-30 09:14:21

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

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

来源

2013-04-30 09:26:37 Barmar

这对我来说似乎是一个很好的解决方案，但是由于该页面确实是一个巨大的页面，因此会不会有很多脚本在运行中保持性能？ – 2013-04-30 10:13:37

如果您关心的所有元素都是特定项目的子项，则可以使用较窄的选择器替换'$（document）'。另外，如果父项都是相同的类型，则可以用元素类型选择器替换'*'。 – Barmar 2013-04-30 10:25:59

+1我会以此为解决方案。我已经实现了这一点，并感觉它为我工作。谢谢。 – 2013-05-01 05:30:54

上使用委派事件

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); 

});

它最好使用本文档中的最接近的静态父容器则更好pereformances文档本身.. link阅读更多有关事件

来源

2013-04-30 07:01:49 bipen

最好的做法是将事件附加到您认为永远不会改变的最亲近父母身上。这样jQuery的执行速度更快。文件似乎很遥远：P – tbleckert 2013-04-30 07:03:59

是的..更新谢谢 – bipen 2013-04-30 07:05:14

@bipen我没有看到这个工作。你能写一个小提琴吗？我可能会错过一些东西。干杯! – 2013-04-30 09:12:41

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

回答

相关问题