如何檢測元件Ajax更新每次

Question

我的目標是播放音頻文件，使用QuickTime插件和收聽音頻結束事件，然後更新與另一個文件中的音頻對象播放等

這裏是音頻元素（我使用primefaces4）：

<h:panelGroup id="questionsAudioPG"> 
    <object width="2" height="2" data="#{testBean.audioPath}" id="speechAudio" 
    name="speechAudio" > 
    <param name="CONTROLLER" value="false" /> 
    <param name="AUTOPLAY" value="true" /> 
    <param name="LOOP" value="false" /> 
    <param name="POSTDOMEVENTS" value="true" /> 
    <param name="ENABLEJAVASCRIPT" value="true" /> 
    </object> 
</h:panelGroup> 

這裏是我的javascript代碼：

<h:outputScript type="text/javascript"> 

$(document).ready(function(){ 
    RegisterListener('qt_ended', 'speechAudio', 'speechAudio_embed', audioEndedEventFired); 
}); 

function audioEndedEventFired() { 
audioEnded(); 
} 

function myAddListener(obj, evt, handler, captures) { 
    if (document.addEventListener) 
     obj.addEventListener(evt, handler, captures); 
    else 
     // IE 
     obj.attachEvent('on' + evt, handler); 
} 

function RegisterListener(eventName, objID, embedID, listenerFcn) { 
    var obj = document.getElementById(objID); 
    if (!obj) 
     obj = document.getElementById(embedID); 
    if (obj) 
     myAddListener(obj, eventName, listenerFcn, false); 
} 
</h:outputScript> 

現在發生的事情是，我的聽衆是在FIR正常工作但是在我的處理函數通過ajax更新頁面之後，事件再也不會被解僱了！

我想這是因爲DOM發生了變化，我需要重新註冊事件監聽器後，每個ajax更新到音頻元素。

順便說一句：qt事件只在chrome上觸發，並沒有在firefox中觸發。

任何幫助表示讚賞。

Answer 1

我想這種情況的發生，因爲DOM改變，我需要 每個阿賈克斯更新到 音頻元素後重新註冊事件監聽器一次。

是的，如果您加載新的內容到您的網頁，取代以前對事件偵聽器和使用靜態的事件處理程序（你是），那麼你將不得不重新安裝這些事件處理程序的新元素新內容中的DOM元素。

您正在使用的事件處理程序附加到特定的DOM元素。當您加載新內容並用新的DOM元素替換DOM元素時，舊DOM元素上的事件處理程序已不存在。

一個可能的解決辦法是簡單地調用：

RegisterListener('qt_ended', 'speechAudio', 
    'speechAudio_embed', audioEndedEventFired); 

再次你id='speedAudio'或'speechAudio_embed'更換元素之後。

---

另一種方法（如果你聽的泡沫事件）是你附上你的事件監聽器未取代父對象使用委託事件處理和使用e.target，看看哪個對象觸發事件。如果您的事件冒泡並且您使用委託的事件處理附加到本身未重新創建的父對象，則即使在替換子內容後，您的事件處理程序仍然可以工作。

---

好了，現在的問題已經變成一個約Primefaces.ab()，this SO answer顯示第一個參數.ab()方法是可以給予oncomplete屬性，將指定的函數被稱爲cfg對象的時候， ajax調用完成。

var cfg = { 
    ... 
    oncomplete: function() { 
     // register your event handlers here 
    } 
}; 
Primefaces.ab(cfg, ...); 

有指定的this Primefaces documentation 509頁上的onComplete處理程序的模板例子。