如何使用ajax检测每次元素更新
我的目标是使用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>现在发生的情况是，我的侦听器第一次工作正常，但是在我的处理程序函数通过ajax更新页面之后，事件就再也不会触发了!！
我猜这是因为DOM发生了更改，并且我需要在每次ajax更新音频元素后重新注册事件侦听器。
顺便说一句: qt事件仅在chrome上触发，在firefox中不触发。
任何帮助都是非常感谢的。
回答 1
Stack Overflow用户
发布于 2014-05-23 23:40:54
我猜这是因为DOM发生了变化，我需要在每次ajax更新音频元素后重新注册事件侦听器。
是的，如果您将新内容加载到页面中，替换了以前具有事件侦听器的元素，并且您正在使用静态事件处理程序(确实如此)，那么您将不得不将这些事件处理程序重新附加到新内容中的新DOM元素。
像您正在使用的事件处理程序被附加到特定的DOM元素。当您加载新内容并用新的DOM元素替换DOM元素时，旧的DOM元素上的事件处理程序就消失了。
一种可能的修复方法是简单地调用：
RegisterListener('qt_ended', 'speechAudio',
'speechAudio_embed', audioEndedEventFired);在用id='speedAudio'或'speechAudio_embed'替换该元素之后，再次执行此操作。
另一种方法(如果您正在侦听的事件是冒泡的)是使用委托事件处理，将事件侦听器附加到未被替换的父对象，并使用e.target查看是哪个对象触发了事件。如果事件冒泡，并且使用附加到未重新创建的父对象的委托事件处理，则即使在替换子内容之后，事件处理程序仍将工作。
好了，现在问题已经变成了关于Primefaces.ab()的问题，this SO answer显示.ab()方法的第一个参数是一个cfg对象，该对象可以被赋予一个oncomplete属性，该属性将指定当ajax调用完成时要调用的函数。
var cfg = {
...
oncomplete: function() {
// register your event handlers here
}
};
Primefaces.ab(cfg, ...);在this Primefaces documentation的第509页上有一个指定oncomplete处理程序的模板示例。
https://stackoverflow.com/questions/23839355
复制
相似问题
使用AJAX在每次点击时更新信息
使用AJAX更新多个元素
AJAX -元素更新
使用Ajax更新双重html元素
如何在每次更新状态时呈现元素
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
