1

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)-これも機能しません。

キーアップイベントにどのように応答できるかについてのアイデア-主な質問は、そのような場合に「残りの文字数」を変更する方法ですか?

私もAngularJSを使用していますが、とにかく影響しているとは思いません（モーダルウィンドウは、以前のアクションに基づいてAngularJSがロードするビューテンプレートにあります）

4

2 に答える 2

7

Finally found the solution. @sasi's solution is partially correct.

Basically, the issue is discussed here: https://github.com/twitter/bootstrap/issues/2380

The solution is the following:
Replace 

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

with 

$("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 に答える