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>

现在发生的事情是我的听众第一次正常工作，但在我的处理程序功能通过ajax更新页面之后，事件再也不会被激活!!

我猜这种情况正在发生，因为DOM已经更改，我需要在每次ajax更新到音频元素后再次注册事件监听器。

BTW：qt事件仅在chrome上触发，而不是在firefox中触发。

感谢任何帮助。

Answer 1

我猜这种情况正在发生，因为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页指定不完整处理程序的模板示例。

如何使用ajax每次检测元素更新

1 个答案: