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 -->
静态字段没问题,但自动创建的字段与动态添加的字段一起工作。
我认为执行顺序不是你所期望的。我认为这正在发生:
- 您更新变量字段
- 订阅者被调用,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 元素可以处理