似乎无法使用 JavaScript/jQuery 更改 h:outputText “值”，甚至是值表达式

Question

所以这是我的问题。我正在尝试获取来自后端的值并删除值中不需要的文本。所以基本上我得到了一种颜色，颜色名称的末尾有一两个星号。我将该值发送到 JavaScript 函数并删除字符串中可能存在的所有星号。到目前为止，这对我来说一直很好。我发现另一个发生这种情况的位置，当我尝试做同样的事情时，它不起作用。字符串带有星号，我删除它们并用新字符串替换 html，片刻之后，它可以工作，然后原始字符串又回来了。

所以，这里有更多细节。在我正在开发的应用程序中，有一个链接，单击该链接会打开一个 Richfaces 模式窗口。然后，有一个表格，其中包含来自网站的各种报价。每行末尾都有一个“查看”链接，用于查看报价的详细信息。单击该按钮后，它会打开另一个模式，其中包含一个表格，其中包含客户希望引用的每种产品、颜色、尺寸和其他信息。在“查看”链接代码中有一个 onclick，这是我放置函数调用的地方。

<a4j:commandLink ajaxSingle="true" action="# editRequestedQuoteController.viewRequestedQuote}"
    reRender="mainRequestedQuotePanel,subpanel,btnPanel,messagPanelView"
    onclick="#{rich:component('viewRequestedQuotePanel')}.show(); changeColorName()">
    <span>View</span>
    <f:param name="orderId" value="#{order.id}"/>
</a4j:commandLink>

changeColorName() 函数被调用并运行以下代码：

function changeColorName() {
    jQuery(".managedorder-color-name").each(function(){
        var existingColor = jQuery(this).text();
        var newColor = existingColor.replace(/\*/g, '');
        jQuery(this).text(newColor.trim(newColor));
    });
}

代码 newColor.trim(newColor) 只是从字符串中删除前导/尾随空格。

这里是渲染字符串的代码：

<c:forEach var="orderItem" items="#{editRequestedQuoteBean.orderItems}" varStatus="status" >
    ...
    <td rowspan="#{orderItem.logo.logoName != null ? '4' : '2'}">
        <h:outputText styleClass="managedorder-color-name" value="#{orderItem.itemColor.swatchcolor}" />
    </td>
    ...
</c:forEach>

当我使用 FireBug 调试它时，我可以浏览代码并查看它的执行情况，因此我知道它正在被调用。但是我应该在这里指出，有时在第一次运行时，代码似乎没有执行，但如果我第二次单击“veiw”链接，它就会执行。当我越过最后一行时，我可以看到文本被我发送的字符串替换，但是如果我“继续”（F8），字符串会回到我开始使用的版本，即带有星号的版本。有谁知道为什么会发生这种情况？任何人，如果不清楚或需要更多信息，请告诉我。

谢谢。

Answer 1

这些更改已被 ajax 渲染覆盖。 onclick 在 ajax 请求之前执行。但是当 ajax 请求完成时，HTML DOM 树会用来自服务器端的新元素进行更改。您需要在ajax 渲染之后执行changeColorName() JS 函数。您可以为此使用oncomplete 属性。

<a4j:commandLink ... oncomplete="changeColorName()" />