やりたいこと：AJAXで動的に追加したフォームのボタンにイベント（例：click）リスナーの追加

• クライアント側にフォーム追加AJAXを埋込ます
• AJAXの動作でクライアント側に新規フォームが追加されます
• ＡＪＡＸプログラムに追加されたフォームに「送信」ボタンに「ｃｌｉｃｋ」イベントのリスナーもつけて、クライアント側に転送します

  // ajax作動前にボタンにListener追加
  $("#text-button").on('click', function(){
    //  送信ボタンが押されたらの処理
  })
  

問題点：事前に用意したリスナーが後で追加されたフォームに効かない

• 理由が比較的に簡単です：ＡＪＡＸが動作する前に追加予定のフォームボタン（#text-button）が存在しないため、リスナーの追加は無効です
  
• もちろん、ajaxでフォーム追加すると同時に、フォームボタンのリスナーをつける別のｊｓファイルもクライアント側に渡せば問題はありません
• 同じページなので、一つのｊｓファイルで纏めたいですが、別のｊｓファイルに分けたくないです

解決1：ｊQueryのajaxComplete関数でAJAX動作後でフォームボタンにリスナーをつけます

• ｊQueryのajaxComplete関数の利用

  // after ajax complete, add listener to form button
  $(document).ajaxComplete(function(){
        $("#text-button").on("click", function(){
              //ボタンがクリックされたときの処理
          });
   });

• ajax動作後に、フォームボタン（#text-button）が現れ、リスナーの追加ができます

解決２：jQueryのchange関数で動的にフォーム追加後にフォームボタンにリスナーをつけます

• ｊQueryのchange関数を利用してフォーム追加する場所を監視します

  // after ajax complete, add listener to form button 
  $("#form_replace_div").change(function(){
    $("#text-button").on("click", function(){ 
      //ボタンがクリックされたときの処理 
    }); 
  });

• $("#form_replace_div")：フォームを追加する予定の場所を指しています