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

Question

我正在 <p:dataTable> 上执行以下 jQuery 函数过滤器(其 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 更新的吗？

---

引入了一个新的问题域:

This PrimeFaces 社区论坛上的问题和相应的回复仍然没有导致以下问题域的解决方法/解决方案。

if a wrong key is hit (i.e a non-digit key, except backspace, delete etc) then, the data table is updated unnecessarily that causes some costly queries to be fired upon the database which is completely unnecessary and the data table must be prevented from being updated.

Answer 1

流程如下:

• 浏览器检索 HTML 输出。
• 浏览器根据 HTML 标记填充 HTML DOM 树。
• 完成后，浏览器触发 HTML DOM ready 事件。
• jQuery 的 $(document).ready() 函数处理程序全部被调用。
• 你的通过 ID 在 DOM 中找到一个元素，并将 keydown 监听器附加到它。
• 在用户交互过程中，会触发 ajax 请求，并使用 ajax 响应提供的新 HTML 元素更新 HTML DOM 树。
• 除其他外，具有 keydown 监听器的那个元素从 HTML DOM 树中删除，并被一个没有任何 keydown 监听器的新元素替换。在 ajax 请求期间不会触发文档 ready 事件。您准备好的处理程序永远不会被重新调用。 keydown 监听器永远不会重新附加。对最终用户而言，它似乎确实“停止运行”。

这种特殊情况 的解决方案现在应该很明显了:在完成 ajax 调用时显式地重新附加 keydown 监听器。最直接的方法是将附加 keydown 监听器的工作提取到可重用函数中，并按如下方式触发它:

function applyKeydownOnTableFilter() { 
    // ...
}

$(document).ready(applyKeydownOnTableFilter);

这样你就可以做一个:

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

但是，对每个 ajax 命令/监听器重复这样的操作非常乏味，而且维护起来不是很友好。更好的方法是使用不同的方法:使用 jQuery 的 $.on()反而。替换

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

通过

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

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

另见:

• JSF/PrimeFaces ajax updates breaks jQuery event listener function bindings

---

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