Re-Initialize JQuery have XPages Partial Refresh 更新 DOM答案

【问题标题】：Re-Initialize JQuery have XPages Partial Refresh updates DOMRe-Initialize JQuery have XPages Partial Refresh 更新 DOM
【发布时间】：2018-02-27 15:56:24
【问题描述】：

我有一个来自核心控件的选项卡式面板，里面是一个<xp:inputText>，它有一个用于限制字段长度的 jQuery 挂钩。当我将页面更改为编辑模式时，如果我在屏幕上有此选项卡，效果会很好。但是，如果我不在该选项卡上并切换到编辑模式，然后更改为我想要的选项卡，则它不起作用。

我认为这是因为当 jQuery 启动时这些控件并不存在。任何人都知道一种让 jQuery 刷新自身以获取初始加载时不存在的新 DOM 添加的方法？

这是页面上存在的代码：

<xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[$('input[maxlength]').maxlength({
            alwaysShow: true,
            threshold: 10,
            warningClass: "label label-success",
            limitReachedClass: "label label-danger"
        });]]></xp:this.value>
    </xp:scriptBlock>

字段是这样的：

<xp:inputText id="inputText2"
                        value="#{viewScope.vsWorkingContentAdd.description}">
                        <xp:this.attrs>
                            <xp:attr name="maxlength" loaded="true" value="75"></xp:attr>
                        </xp:this.attrs>
                    </xp:inputText>

同样，代码可以工作，因为它会找到已经存在的字段。这个问题是关于在 XPages 中，当您进行部分刷新并出现 <xp:inputText> 时，您如何让 jQuery 看到它？

【问题讨论】：

标签： jquery xpages

【解决方案1】：

您是正确的，具有通过 javascript 分配的属性和事件的对象在部分刷新期间重新加载后需要重新分配它们。您可以将脚本块修改为如下所示：

function setValidation() {
    $('input[maxlength]').maxlength({
        alwaysShow: true,
        threshold: 10,
        warningClass: "label label-success",
        limitReachedClass: "label label-danger"
    });
 }

$(document).ready(function() {
    setValidation(); // On page load
    dojo.subscribe('partialrefresh-complete', function(method, form, refreshId, options) {
        setValidation(); // On partial refresh
    });
});

【讨论】：