JSF / PrimeFaces ajax更新打破了jQuery事件监听器函数绑定

我正在使用jQuery为HTML中的每个input注册一个change事件监听器，如下所示：

   //     
   
 
 
   

如果用户更改myTextarea的内容， myTextarea触发这两个change事件。 但是，在按下部分更新myTextarea的更新按钮后，之后只会触发changeHandler。 $(document).ready()绑定的事件不再触发。

这个PrimeFaces是相关的和/或预期的行为？ 如果是，那么如何在不重新运行文档就绪脚本的情况下确保触发第二个事件。

Answer 1

至于问题的原因，ajax请求将使用ajax响应中的新HTML元素更新HTML DOM树。 那些新的HTML元素显然没有附加jQuery事件处理函数。 但是， $(document).ready()不会在ajax请求上重新执行。 您需要手动重新执行它。

这可以通过各种方式实现。 最简单的方法是使用$(document).on(event, selector, function)而不是$(selector).on(event, function) 。 这与文档绑定，当在与给定selector匹配的元素上触发给定的eventName时，始终会调用给定的functionRef 。 因此，您永远不需要通过JSF方式显式重新执行该函数。

 $(document).on("change", ":input", function() { console.log("From change event on any input: " + this.id); }); 

---

另一种方法是在完成ajax请求时自己显式重新执行该函数。 当你真正有兴趣在ready / load事件期间立即执行函数时（例如直接应用某些特定于插件的行为/ look’n’feel，例如日期选择器），这将是唯一的方法。 首先，您需要将$(document).ready()作业重构为可重用的函数，如下所示：

 $(document).ready(function(){ applyChangeHandler(); }); function applyChangeHandler() { $(":input").on("change", function() { console.log("From applyChangeHandler: " + this.id); }); } 

（请注意，我删除并简化了完全不必要的$.each()方法）

然后，选择以下方法之一，在完成ajax请求时重新执行它：

1. 使用PrimeFaces命令按钮的oncomplete属性：

    oncomplete="applyChangeHandler()" 

2. 使用而不是$(document).ready() ，

     applyChangeHandler();  

   并在update属性中引用它：

    update=":applyChangeHandler" 

3. 使用在每个ajax请求上自动更新它：

      applyChangeHandler();   

4. 使用OmniFaces 代替$(document).ready() ， 以及所有on em。

    applyChangeHandler();