PrimeFaces Calendar组件oncomplete异常：多日历触发错误JS方法

你遇到的问题核心在于重复绑定全局事件委托，导致事件监听叠加且不分目标：

1. 每次PrimeFaces日历触发close事件时，你的clear1()/clear2()方法都会执行，而这两个方法里又通过$(document).on('click', '.ui-datepicker-close', ...)给全局的document对象绑定一次点击监听。
2. 因为绑定的是全局document，不管点击哪个日历的关闭按钮，所有已绑定的监听回调都会被触发。
3. 多次打开/关闭日历后，绑定的监听会不断叠加，所以你会看到每个方法触发两次（甚至更多次）。

另外你的逻辑其实绕了弯路：close事件本身就是日历面板关闭时触发的事件（包含点击关闭按钮的场景），完全没必要额外绑定关闭按钮的点击事件。

这里提供两种简洁可靠的解决思路：

方案1：直接在close事件中执行清空操作 #

既然close事件已经是面板关闭时触发，直接在oncomplete里调用清空方法即可，去掉多余的事件绑定：

修改后的PrimeFaces代码 #

<p:calendar id="cal1" showButtonPanel="true">
    <p:ajax event="close" oncomplete="clearValue();"/>
</p:calendar>
<p:calendar id="cal2" showButtonPanel="true">
    <p:ajax event="close" oncomplete="clearValue1();"/>
</p:calendar>

对应的JS代码 #

function clearValue(){
    document.getElementById("form:cal1_input").value="";
}
function clearValue1(){
    document.getElementById("form:cal2_input").value="";
}

方案2：一次性绑定事件，关联对应日历（更优雅） #

如果确实需要绑定关闭按钮的点击事件，建议页面加载完成后一次性绑定，通过DOM结构关联对应的输入框，避免重复绑定：

JS代码 #

$(document).ready(function() {
    // 给所有日历的关闭按钮绑定一次事件
    $(document).on('click', '.ui-datepicker-close', function() {
        // 找到当前关闭按钮所属的日历面板，关联到对应的输入框
        var datePicker = $(this).closest('.ui-datepicker');
        var inputId = datePicker.data('inputId');
        if(inputId) {
            document.getElementById(inputId).value = "";
        }
    });
});

修改后的PrimeFaces代码（传递输入框ID） #

<p:calendar id="cal1" showButtonPanel="true" 
            data-input-id="form:cal1_input"/>
<p:calendar id="cal2" showButtonPanel="true" 
            data-input-id="form:cal2_input"/>

（此方案不需要再绑定p:ajax的close事件）

• 避免在重复触发的事件（比如close、change）中使用$(document).on()绑定事件，否则会导致监听不断叠加。
• 尽量优先给局部元素绑定事件，而非全局document，减少不必要的事件冒泡和冲突。

内容的提问来源于stack exchange，提问作者user3729090