Bootstrap 最大长度插件

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

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

您更新变量字段
订阅者被调用，DOM开始渲染
订阅者将首先执行。它试图启动插件，但没有任何东西可以让它工作。
DOM已更新-订阅后！

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

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

然后向您的视图模型添加一个名为 doPlugin 的方法，它会设置您的新 HTML:

中所需的所有插件

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

这将按如下方式工作：

您更新变量字段
DOM开始渲染
更新 DOM 并触发 afterRender
doPlugin 被调用
您的代码现在有一些有效的 DOM 元素可以处理

Bootstrap 最大长度插件

Bootstrap Maxlength plugin

jquery

maxlength

twitter-bootstrap

knockout.js