0

フォームの一部であるテキスト領域に、Twitter のような数字のカウント ダウンがあります。

<form method="post" id="myemailform" action="">
<label for="ReferralMessage">Optional message:</label><textarea class="message" name="message"></textarea>
    <span class="countdown"></span>
</form>

このための私のjQuery 1.8.3コード：

function updateCountdown() {

    var remaining = 300 - jQuery('.message').val().length;
    jQuery('#myemailform button[type="submit"]').attr('disabled', false);
    if (remaining < 0){
        jQuery('.countdown').text(remaining).css({'color': 'red'});
        jQuery('#myemailform button[type="submit"]').attr('disabled', true);
    }
    if (remaining >= 0){
        jQuery('.countdown').text(remaining).css({'color': 'black'});
    }
}

jQuery(function() {

    var remaining = 300;
    //print amount currently
    jQuery('.countdown').text(remaining);
    //now update with changes
    jQuery('.message').on('input tap', updateCountdown);
});

これは、フォームが送信されるまでうまく機能します。ページは更新されましたが、カウントダウンが機能しなくなりました。

手動で更新すると、再び機能し始めます。最初のフォーム送信後にイベントがトリガーされないのはなぜですか?

4

1 に答える 1

1

ああ。コードに問題はありません。それは私のセレクターとの競合でした。messageテキストボックスの名前として使用しました。他のものと競合しているように見えました。簡単な修正は、それを変更することです：

<form method="post" id="myemailform" action="">
<label for="ReferralMessage">Optional message:</label><textarea class="optionalmessage" name="optionalmessage"></textarea>
    <span class="countdown"></span>
</form>
于 2013-02-27T18:48:42.753 に答える