引导最大长度插件

Question

我正在使用 bootstrap maxlength 插件源： http://mimo84.github.io/bootstrap-maxlength/

一个非常简洁的插件，用于设置 maxlength 属性的样式。 现在，当我动态创建一个新的文本输入和具有最大长度的纹理时，我遇到了问题。

创建后，我使用以下命令进行新调用：

     $('#newIdOfTextfield').maxlength();

但是没有激活插件。有没有人知道去哪里找，或者有答案？

我有一个订阅者功能，当我在功能中放置警报时，我会在屏幕上看到警报，所以在我向变量字段添加一些内容后，它会调用该功能。

self.variableFields.subscribe(function(changes) {
    if (changes[0].status == 'added') {
        $('input[maxlength],textarea[maxlength]').maxlength({
            alwaysShow: true
        });
    }
}, null, 'arrayChange');

输出是这样的：

    <!-- ko foreach: variableFields -->

            <!-- ko if: fieldType == 'text' -->
            <div class="form-group">
              <label class="control-label col-lg-3 col-md-3" data-bind="text: fieldTitle"></label>
              <div class="col-lg-7 col-md-7">
                <input type="text" maxlength="150" class="form-control" placeholder="" data-bind="value: fieldValue">
              </div>
            </div>
            <!-- /ko -->

    <!-- /ko -->

使用静态字段就可以了，但使用自动创建的字段，它不适用于动态添加的字段。

Answer 1

我认为执行顺序不是你所期望的。我认为这正在发生：

1. 您更新 variableFields
2. 订阅者被调用并开始渲染 DOM
3. 订阅者将首先执行。它尝试启动插件，但没有任何东西可以处理。
4. DOM 已更新 - 在订阅者之后！

您可以尝试通过在 foreach 上使用 afterRender 事件来修复它。像这样设置你的 HTML：

<!-- ko foreach: {data: variableFields, afterRender: doPlugin} -->

然后在视图模型中添加一个名为 doPlugin 的方法，它会设置新 HTML 中所需的所有插件：

self.doPlugin = function() {
    $('input[maxlength],textarea[maxlength]').maxlength({
        alwaysShow: true
    });
}

这将按如下方式工作：

1. 您更新 variableFields
2. DOM 开始渲染
3. DOM 已更新并触发 afterRender
4. doPlugin 被调用
5. 您的代码现在可以处理一些有效的 DOM 元素