AJAXで動的に追加したフォームに事前定義したJavascriptを動作させる方法

記事カテゴリ

タグ

やりたいこと：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")：フォームを追加する予定の場所を指しています