0

次のコードがあります。

  var supportOnInput = 'oninput' in document.createElement('input');

  $("input[maxlength], textarea[maxlength]").each(function() {
    var $this = $(this);
    var maxLength = parseInt($this.attr('maxlength'));
    $this.attr('maxlength', null);

    var el = $("<span class=\"character-count label bg-success\">" + maxLength + "</span>");
    el.insertAfter($this);

    $this.bind(supportOnInput ? 'input' : 'keyup', function() {
      var cc = $this.val().length;
      el.text(maxLength - cc);
      if(maxLength < cc) {
        el.addClass("bg-danger");
      } else {
        el.removeClass("bg-danger");
      }
    });
  });

問題は、考慮する必要がある動的に生成された入力要素があることです。問題はイテレータにあるため、に変更bindしてonも必ずしも解決するとは限りません。eachそれを機能させるためのスマートなソリューションはありますか?

アップデート：

問題を詳しく説明するために、特定の長さまでの入力を受け入れるコメント フォームがあります。上記のスクリプトは、フィールドの長さについてクライアント側の検証を実行します。通常は正常に機能しますが、フィールド自体が動的に生成された場合 (たとえば、この検証が必要なコメント フィールドを持つ AJAX 経由で追加された投稿)、機能しません。$.each()ページがロードされたときに現在存在する要素のみを調べ、そのようにバインドされていないため、イテレータ関数で発生していると思います.on()。それで、私の質問は、動的に生成された要素で動作するように、上記のコードを置き換える最も賢い方法は何ですか?

4

3 に答える 3

0

使用.on():

var supportOnInput = 'oninput' in document.createElement('input');

$('body').on( supportOnInput ? 'input' : 'keyup', ".maxlength", function() {
    // do your stuff here
});

セレクターはクラスごとであることに注意してください.maxlength

于 2013-09-19T22:14:47.907 に答える