表单验证失败后jQuery无法正常工作

Question

我有下面的表格，我有一个 jquery sn-p，无论用户是否输入，它都会在用户输入的开头添加$。

如果我提交表单但验证失败，我的 jquery sn-p 将不再将 $ 添加到用户的输入中。

为什么在表单验证后这不起作用？

<h:form id="add">

    <h:outputLabel for="startDate" value="Start Date" />
    <h:panelGrid columns="1">
        <p:message for="startDate" />
        <p:calendar value="#{fundingBacker.startDate}" id="startDate" mode="popup" navigator="true" required="true" requiredMessage="Start Date is required" />
    </h:panelGrid>

    <h:outputLabel for="totalCost" value="Total Cost" />
    <h:panelGrid columns="1">
        <p:message for="totalCost" />
    <p:inputText value="#{fundingBacker.totalCost}" id="totalCost" styleClass="currency">
        <f:convertNumber currencySymbol="$" groupingUsed="#{true}" maxFractionDigits="0" type="currency"></f:convertNumber>
    </p:inputText>
    </h:panelGrid>

    <p:commandButton value="Add Grant" type="submit"  actionListener="#{fundingBacker.add}"  />
</h:form>

jQuery sn-p

 $(document).ready(function() {
        $('.currency').on('keyup', function() {
        console.log('keyup');
        if($(this).val().indexOf('$') == -1) {
            $(this).val('$'+$(this).val()); 
        }
        });
    }

Answer 1

$(document).ready() 在页面加载期间触发，此时 HTML DOM 已准备好填充。但是，您很可能在提交时对表单进行了 ajax 更新（您当前的代码没有显示，但是这样验证消息将永远不会出现，当然您必须在某处执行此操作）。当您对表单进行 ajax-udpate 时，JavaScript 已将 HTML DOM 树中的表单元素替换为来自 ajax 响应的新元素。但是，$(document).ready() 在 ajax 更新后不会运行，因此这些新元素永远不会与 keyup 处理程序一起应用。

基本上有两种解决方案：

1. 在完成 ajax 请求后重新运行 $(document).ready() 中的代码。

   例如

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

   与

   $(document).ready(function() {
       applyCurrencyOnKeyup();
   });
   
   function applyCurrencyOnKeyup() {
       $('.currency').on('keyup', function() {
           if($(this).val().indexOf('$') == -1) {
               $(this).val('$'+$(this).val()); 
           }
       });
   }
   

   ---

2. 将$(document).ready() 重写为$(document).on()。

   $(document).on("keyup", ".currency", function() {
       if($(this).val().indexOf('$') == -1) {
           $(this).val('$'+$(this).val()); 
       }
   });
   

   （不，无需将其包装在准备好的文档中）