通过 Ajax 更新 JSF 组件后，JavaScript/jQuery 事件侦听器不起作用

我正在执行以下 jQuery 函数<p:dataTable>过滤器（其id是id），允许用户在过滤器组件中仅输入数字。

$(document).ready(function() {
    $("#form\\:dataTable\\:id\\:filter").keydown(function(event) {
        //Allow: tab, escape, and enter
        if(event.keyCode===9||event.keyCode===27||event.keyCode===13||
            //Allow: Ctrl+A, Ctrl+C
            (event.keyCode===65&&event.ctrlKey===true)||(event.keyCode===67&&event.ctrlKey===true)||
            //Allow: home, end, left, right
            (event.keyCode>=35&&event.keyCode<=39)){
            //let it happen, don't do anything
            event.preventCapture();
            return;
        }//backspace, delete
        else if(event.keyCode===46||event.keyCode===8)
        {
            return;
        }
        else{//Ensure that it is a number and stop the keypress
            if (event.shiftKey||(event.keyCode<48||event.keyCode>57)&&(event.keyCode< 96||event.keyCode>105)){
                //event.preventDefault();
                event.preventCapture();
            }
        }
    });
});

该函数位于context/resources/default/js/digit_only_textfield.js。因此，它可以用在 XHTML 页面上，例如：

<h:outputScript library="default" name="js/digit_only_textfield.js"/>

XHTML 页面如下所示。

<h:outputScript library="default" name="js/digit_only_textfield.js"/>

<h:form id="form" prependId="true">

    <!--PrimeFaces extension <pe:blockUI>-->         

    <p:remoteCommand name="updateTable" update="dataTable"/>

    <p:panel id="panel">
        <h:panelGrid id="panelGrid" columns="3" cellpadding="5">

            <!--Some UIInput components-->

            <p:commandButton id="btnSubmit" 
                             update="panel" 
                             onstart="PF('blockUIWidget').block();" 
                             oncomplete="if(!args.validationFailed) {updateTable();}PF('blockUIWidget').unblock();" 
                             actionListener="#{bean.insert}" 
                             value="Save"/>
        </h:panelGrid>
    </p:panel>

    <p:dataTable id="dataTable" 
                 var="row" 
                 value="#{bean}"
                 filterEvent="keydown"

                 ...
                 ...  >

                 ...
                 ...
    <p:dataTable>
<h:form>

这个 jQuery 对于 id 为的过滤器工作得很好is但是当这个<p:dataTable>通过按给定更新<p:commandButton>，它停止运行。

之后如何让这个功能发挥作用<p:dataTable>是通过AJAX更新的吗？

引入了一个新的问题域：

ThisPrimeFaces 社区论坛上的问题和相应回复仍然无法为以下问题领域提供解决方法/解决方案。

如果按了错误的键（即非数字键，退格键除外，请删除 等）然后，数据表被不必要地更新，导致一些 对数据库发起昂贵的查询，这完全是 不必要并且必须防止数据表被更新.

流程如下：

• 浏览器检索 HTML 输出。
• 浏览器根据 HTML 标记填充 HTML DOM 树。
• 完成后，浏览器触发 HTML DOMready event.
• jQuery 的$(document).ready()函数处理程序都被调用。
• 你通过 ID 在 DOM 中找到一个元素并附加一个keydown聆听它。
• 在用户交互期间，会触发 ajax 请求，并使用 ajax 响应传递的新 HTML 元素更新 HTML DOM 树。
• 其中，正是该元素具有keydown侦听器从 HTML DOM 树中删除，并替换为一个没有任何内容的全新元素keydown听众。该文件ready在 ajax 请求期间不会触发事件。您的就绪处理程序永远不会被重新调用。这keydown监听器永远不会重新连接。对于最终用户来说，它确实看起来“停止运行”。

解决方案在这个特殊情况现在应该很明显了：明确地重新附加keydownajax 调用完成时的侦听器。最直接的方法是提取附加的工作keydown侦听器进入可重用函数并按如下方式触发它：

function applyKeydownOnTableFilter() { 
    // ...
}

$(document).ready(applyKeydownOnTableFilter);

这样你就可以做：

<p:commandButton ... oncomplete="applyKeydownOnTableFilter()" />

但对每个 ajax 命令/侦听器重复执行此操作非常乏味，而且维护起来不太友好。更好的方法是采用不同的方法：使用 jQuery$.on()反而。代替

$(document).ready(function() {
    $("#form\\:dataTable\\:id\\:filter").keydown(function(event) {
        // ...
    });
});

by

$(document).on("keydown", "#form\\:dataTable\\:id\\:filter", function(event) {
    // ...
});

这样一来keydown侦听器实际上并不附加到感兴趣的元素。相反，由于 JavaScript 的事件冒泡特性，keydown 事件最终会到达$(document)— 在 JSF ajax 请求期间始终存在且通常不会更改。一旦达到，$(document).on()被触发，然后将确定事件源并检查它是否与给定的选择器匹配，如果是，则调用该函数。这一切都无需附加keydown监听物理元素，因此对元素是否在 HTML DOM 树中被删除/替换不敏感。

也可以看看：

• JSF/PrimeFaces ajax 更新破坏了 jQuery 事件侦听器函数绑定

顺便问一下，您是否也看到 HTML DOM 树和 JSF 组件树之间有多少相似之处？