我正在使用Twitter Bootstrap。
我创建了一个模态窗口,它按预期调用。
在这个模态中,有一个表单:
<div id="initialSurveyInfo" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalId" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="modalId">Initial Survey Information</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="surveyTitle">Survey Title :</label>
<div class="controls">
<input type="text" id="surveyTitle">
<span class="help-inline muted"><span class="char-limit">36</span> character(s) left</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="surveyDesc">Description:</label>
<div class="controls">
<textarea rows="5"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>
<a href="/createSurvey" class="btn btn-primary continue">Continue</a>
</div>
</div>
对于输入,用户仅限于36个字符。超过36个字符,我想禁用“继续”按钮 我在输入旁边有当前的字符数。
我要处理的jQuery代码是:
$(document).ready(function() {
var calculate = function() {
var chararcters = $("#surveyTitle").val().length;
var remaining = 36 - characters;
if (remaining >= 0) {
$(".char-limit").val(remaining);
if ($(".continue").hasClass("disabled") === true) {
$(".continue").removeClass("disabled");
}
} else {
$(".continue").addClass("disabled");
}
};
$("#surveyTitle").keyup(calculate);
$("#surveyTitle").change(calculate);
});
不幸的是,没有触发keyup()和change()事件/方法。因此,当超过字符数时,剩余的字符数不会下降,也不会禁用“继续”按钮
我将keyup
替换为on('keyup', function)
- 这也不起作用。
关于如何响应keyup事件的任何想法 - 主要问题是如何在这种情况下更改“剩下的字符数”?
我也在使用AngularJS,但我认为它无论如何都不会影响(模态窗口在AngularJS根据之前的某个动作加载的视图模板中)
答案 0 :(得分:3)
终于找到了解决方案。 @ sasi的解决方案部分正确。
基本上,这里讨论的问题是:https://github.com/twitter/bootstrap/issues/2380
解决方案如下:
替换
$("#surveyTitle").keyup(calculate);
带
$("body").on('keyup', "#surveyTitle", calculate);
答案 1 :(得分:2)
on('keyup','#surveyTitle', function) {
}
$("body").on('keyup', "#surveyTitle", calculate);
你尝试过这样吗?