末尾の入力欄に記入があったときに新しい入力欄を追加したい

Question

HTML のフォームでテキストボックスがいくつか並んでいます。
その中で最後の入力欄が文字で埋まったとき、新しい入力欄を追加しようと思って次のようにしました。

var form = $('.example-form');

// 変更時のイベント処理
var textChanged = function(input){
  var textInput = $(input);
  var lastText = $('input[type="text"]', form).last();

  // 最後の入力欄でなければ何もしない
  if( ! textInput.is(lastText) ) return false;
  
  // 空欄でなければ新しく追加
  if(textInput.val() != ''){
    var textInput2 = $('<input type="text">');
    form.append(textInput2);
    textInput2.on('change', function(){
        textChanged(this);
    });
  }
};

$('input[type="text"]', form).last().on('change', function(){
  textChanged(this);
});

入力欄を追加するごとに last() が変わってしまうので追加したすべての入力欄にイベントリスナーを登録しています。
そのせいもあって最後でない入力欄の変更であっても不必要な関数の呼び出しが発生します。
条件分岐で除外しているので動作に問題はないですがコード的には雑然としているように見えます。

このように要素が次々に追加される場合での最後の項目に対してのみ監視する場合にはどのように書けばきれいに書けるのでしょうか？
よろしくお願いします。

Answer 1

それこそイベントデリゲーションの出番ではないでしょうか。

$(form).on('change', 'input[type="text"]:last', ハンドラ)とすれば、付け直しの必要もなく、いつでも最後のinputだけイベントを拾えます。

なお、:lastセレクタはjQuery独自ですので、それにはご注意ください。