0

charCountという jQuery プラグインを使用して、いくつかのテキストエリアの文字カウンターを表示していますが、うまく機能しますが、ページに新しいテキストエリアを (動的に) 追加すると、新しいテキストエリアにカウンターがありません。私は初心者です、プラグインの使用方法は次のとおりです。

$('.message-form').charCount({ allowed: 140, warning: 20 });

更新ソリューション:

$(".message-form").live("click", function(){
        if ($(this).data('hascharcount') == undefined) {
            $(this).data('hascharcount', true).charCount({ allowed: 140, warning: 20 });
        }
    });
4

4 に答える 4

0

ページに動的に追加した後、各テキスト領域の charCount を初期化する必要があるようです。上記の行しかない場合、ページの読み込み時にページ上にあるテキストエリアにのみ影響します。したがって、次のようにします。

//add the textarea with an ID of 'newTextarea1'
//then use charCount on the new textarea
$('#newTextarea1').charCount({ allowed: 140, warning: 20 });
于 2012-12-29T20:14:15.547 に答える
0

最も簡単な方法は、作成された新しい要素に対してそのメソッドを実行することです。

$('<textarea ...>').appendTo('#wherever').charCount({ allowed: 140, warning: 20 });

on()しかし、あなたはそれをしたくないという意味でそれを行うことについて尋ねました。

しかし 

$('.message-form').charCount({ allowed: 140, warning: 20 });

イベントのバインドon()として単純に使用することはできません。on()いつでも作成者による更新がある可能性があるプラグインを編集するのではなく、再いじることを意味します。

したがって、要素を動的に作成した後に毎回 .charCount を呼び出したくない場合は、コンテキストに応じて呼び出すことができます (つまり、ユーザーが実際に要素を使用するまでは呼び出しません)。

$(document).on('focus', '.message-form', function(){
    if (typeof $(this).data('hascharcount')=='undefined') {
        $(this).data('hascharcount', true).charCount({ allowed: 140, warning: 20 });
    }
})

注意多くの人.on()は、減価償却のエイリアスであると想定.live()していますが、そうではありません。on()asを使用するにはlive()、つまり、実行時に存在しない要素に対して、コンテンツが内部で作成される親 div などにアンカーするために既に存在するものが必要ですdocument。

于 2012-12-29T20:21:41.093 に答える
0

次のようなセレクターの親コンテナーをターゲットにしながら、イベントで使用.on()してみてください。focusin .message-form

$("#parentContainer").on("focusin", function(){
  $('.message-form').charCount({ allowed: 140, warning: 20 });
}); // on

...または、bodyタグをターゲットにするか、document代わりに次のようにすることができます:

$("body").on("focusin", function(){
  $('.message-form').charCount({ allowed: 140, warning: 20 });
}); // on

... これにより、現在および将来の要素でプラグインを使用できるようになります (新しい要素を追加するたびにプラグインを再初期化する必要はありません)

ここで確認できるように、動的に追加された要素をサポートしていない他のプラグインでその方法をうまく使用しましたhttps://stackoverflow.com/a/9084293/1055987

注: .on()jQuery v1.7+ が必要です。それ以外の場合.delegate()は、下位バージョンに推奨されます。

編集: Character Count プラグイン内でコールバックを見つけることを期待していましたが、存在しません...したがって、カウンターの重複を避けるために、次のようにコードを微調整できます: 

$("#myForm").on("focusin", '.message-form', function() {
    $(this).next("span.counter").remove();
    $(this).charCount({
        allowed: 140,
        warning: 20
    });
}); // on

実際のデモを見る

于 2012-12-29T20:52:39.510 に答える
-4

新しいテキストエリアを追加するときは、新しいテキストエリアに使用して追加する要素内を調べ、find()その要素でのみプラグインを呼び出します

ある種の行構造、またはテキストエリアのラッパーがあると仮定します。

var newDiv=$('<div class="foo"><textarea class="message-form"></textarea></div>').appendTo('#content')

newDiv.find('.message-form').charCount({ allowed: 140, warning: 20 });
于 2012-12-29T20:27:57.907 に答える