1

我有下面的表格，我有一个 jquery 片段$，无论他们是否输入，它都会添加到用户输入的开头。

如果我提交表单并且验证失败，则我的 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()); 
        }
        });
    }
4

1 回答 1

1

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

基本上有2个解决方案：

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

    例如

    <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()); 
    }
});

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

于 2013-08-26T17:35:07.273 回答