1

我正在使用 Twitter 引导程序。

我创建了一个模态窗口，它按预期被调用。

在这个模态中，有一个表格： 

<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 根据之前的操作加载的视图模板中）

4

2 回答 2

7

终于找到了解决办法。@sasi 的解决方案部分正确。

基本上，这里讨论了这个问题：https ://github.com/twitter/bootstrap/issues/2380

解决方法如下：
更换 

$("#surveyTitle").keyup(calculate);

和 

$("body").on('keyup', "#surveyTitle", calculate);
于 2013-02-27T14:50:24.317 回答
2 
on('keyup','#surveyTitle', function) {

}


$("body").on('keyup', "#surveyTitle", calculate);

你试过这样吗..？

于 2013-02-26T15:38:04.670 回答