將事件處理程序附加到刷新類的所有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元素的直接父元素

回答

相關問題