2013-02-27 67 views
4

我有一個簡單的函數,通過頁面並使用.each()向每個匹配的元素添加CSS類。我也經常使用AJAX更新頁面,並且在第一次AJAX更新發生改變之後,該功能不再適用。jQuery .live()和.each()與AJAX輪詢

代碼:

$("div.col-conversation span.label-sticky").each(function() { 
    $(this).closest('li').addClass('stickyhighlight'); 
}); 

我明白爲什麼它不會第一個AJAX事件之後的工作,去嘗試使用.live().delegate(),但它似乎沒有可以綁定的東西並不事件(即你只能綁定點擊,懸停等)使用這種方法,所以.each()不會工作。

有沒有簡單的方法來執行此功能,而不包括它在AJAX成功回調和沒有使用像livequery插件,這可能是矯枉過正?

+0

你什麼時候調用調用'.each'的函數? – 2013-02-27 01:55:48

+5

['live'死了,因爲它可以](http://jquery.com/upgrade-guide/1.9/#live-removed)... – gdoron 2013-02-27 01:56:37

+0

我認爲@ExplosionPills是在正確的軌道上。新內容加載到頁面後,您不會調用函數來添加類。 – cgatian 2013-02-27 02:02:26

回答

1

我認爲這會爲你工作:

$('body').on('mychange','div.col-conversation span.label-sticky',function() { 
    $(this).closest('li').addClass('stickyhighlight'); 
}); 

添加到您的阿賈克斯成功功能:

$('body').trigger('mychange'); 

或者如果你真的不想(或不能)修改ajax成功函數:

setInterval(function() { 
    $('div.col-conversation span.label-sticky').each(function() { 
     $(this).closest('li').addClass('stickyhighlight'); 
    }); 
},100); 
+0

爲了這個工作,我不會在技術上不得不使用這兩個函數,一個用於初始頁面加載和一個你寫的保持項目後突出顯示一個AJAX事件? – wnajar 2013-02-27 02:18:10

+0

啊,我看到你的編輯。非常聰明:) – wnajar 2013-02-27 02:20:19

+0

雖然將'.trigger()'添加到ajax成功函數並不比把原始函數複製/粘貼到ajax成功函數好得多?我想是的。 – wnajar 2013-02-27 02:21:49

1

什麼可能比附加每個匹配項的事件處理程序更好的是附加一個事件與jQuery.on()與選擇器參數。它允許你做這樣的事情:

$('#container').on('click', '.yourClass', function(event){ doStuff(); }); 

<div id="container"> 
    <span class="yourClass">...</span> 
    <div class="yourClass">...</div> 
    <anything class="yourClass">...</anything> 
</div> 

這意味着,只有一個事件監聽器必須的,而不是每個項目一個事件與類活躍。這也意味着如果將項目添加到容器中,則不需要更新偵聽器。這是更好的性能,更容易處理。

檢查jQuery.com關於.on()的更多信息。

+0

看起來像我需要看看'on()' – wnajar 2013-02-27 02:18:45