jQuery не работает после сбоя проверки формы

Question

У меня есть форму ниже, и у меня есть jquery snippetwhich, который добавляет $ в начало ввода пользователя, набирают ли они это или нет.

Если я отправлю форму и она не прошла проверку, мой фрагмент jquery больше не работает для добавления $ к вводу пользователя.

Почему это не работает после проверки формы?

<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 фрагмент

$(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-обновляете форму на submit (ваш текущий код не показывает этого, но таким образом сообщения проверки не будут отображаться, конечно, вы должны это делать где-то). Когда вы ajax-обмениваете форму, тогда JavaScript заменил элементы формы в дереве HTML DOM новыми элементами из ответа ajax. Тем не менее, $(document).ready() не запускается после обновления ajax, и поэтому эти новые элементы никогда не применяются с обработчиком keyup.

Есть в основном 2 решения:

1. повторно запустить код в $(document).ready() на полном запрос Ajax.

   E.g.

   <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() Rewrite как $(document).on().

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

   (нет, нет необходимости, чтобы обернуть, что в документе готовый)