メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

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

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

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

  • クライアント側にフォーム追加AJAXを埋込ます
  • AJAXの動作でクライアント側に新規フォームが追加されます
  • AJAXプログラムに追加されたフォームに「送信」ボタンに「click」イベントのリスナーもつけて、クライアント側に転送します
    // ajax作動前にボタンにListener追加
    $("#text-button").on('click', function(){
      //  送信ボタンが押されたらの処理
    })
    

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

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

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

  • jQueryのajaxComplete関数の利用
    // after ajax complete, add listener to form button
    $(document).ajaxComplete(function(){
          $("#text-button").on("click", function(){
                //ボタンがクリックされたときの処理
            });
     });
  • ajax動作後に、フォームボタン(#text-button)が現れ、リスナーの追加ができます

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

  • jQueryのchange関数を利用してフォーム追加する場所を監視します
    // after ajax complete, add listener to form button 
    $("#form_replace_div").change(function(){
      $("#text-button").on("click", function(){ 
        //ボタンがクリックされたときの処理 
      }); 
    });
  • $("#form_replace_div"):フォームを追加する予定の場所を指しています

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads