Bootstrap 最大长度插件

Bootstrap Maxlength plugin

我正在使用 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 -->

静态字段没问题,但自动创建的字段与动态添加的字段一起工作。

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

  1. 您更新变量字段
  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. 您更新变量字段
  2. DOM开始渲染
  3. 更新 DOM 并触发 afterRender
  4. doPlugin 被调用
  5. 您的代码现在有一些有效的 DOM 元素可以处理