javascript - 触发 Primefaces p :selectOneMenu onchange

Question

看来是Primefaces p:selectOneMenu组件包装渲染的 HTML <select>标记在 div 中，并将所选项目显示为不同的标签。用户所做的更改将反射(reflect)到原始<select>我猜想是通过 javascript，导致 onchange 事件绑定(bind)到 <select>不工作。因此，我对所有 :input 的 onchange 事件进行了以下绑定(bind)s 不适用于 p:selectOneMenu s。

function applyChangeHandler() {
    $(':input').on('change', function() {
        console.log('on change: ' + this.id);
    });
}

但是 p:selectOneMenu 的 onchange 属性正在被解雇。所以 Primefaces 在幕后触发了这个处理程序(我再次猜测)。

<p:selectOneMenu id="myList" onchange="console.log('selectOneMenu')">
    <f:selectItem itemLabel="val1" itemValue="val1"/>
    <f:selectItem itemLabel="val2" itemValue="val2"/>
</p:selectOneMenu>

所以我的要求是以某种方式将 onchange 处理程序绑定(bind)到所有 p:selectOneMenu来自上面的 applyChangeHandler() 函数。或者它可以通过 Primefaces 特定的 API 或我希望你们分享的其他方式手动触发。否则，快速解决方法是使用 h:selectOneMenu相反。

我的目标是检测“页面上未保存的更改”。因此上面的脚本将被放置在一个通用模板中，如下所示:

<p:outputPanel id="sc" autoUpdate="true">
    <script type="text/javascript">
        applyChangeHandler();
    </script>
</p:outputPanel>

Answer 1

当框架已经为您提供了这样的监听器时，为什么还需要提供额外的监听器？

如果您的目标是使用 jQuery，您只需将处理程序放入可从窗口全局范围访问的 js 文件中即可。

function myChangeHandler(that) {
    //wrap the element with jQuery
    var select = jQuery(that);
    //Get the div parent. The actual wrapper of the `selection-menu` widget markup
    var selectMenu = select.parents('div.ui-selectonemenu');
    //From here I can manipulate any HTML child element using jQuery
    jQuery('label.ui-selectonemenu-label', selectMenu).text('mooo');
}

然后调用您的处理程序 onchange，将 selectOneMenu 作为参数传递

<p:selectOneMenu id="myList" onchange="myChangeHandler(this)">
    <f:selectItem itemLabel="val1" itemValue="val1" />
    <f:selectItem itemLabel="val2" itemValue="val2" />
</p:selectOneMenu>