Ajaxでフォームを入力し、その入力値を取得

メインページのdivはAjaxリクエストで更新されます。更新されたhtmlには、入力フィールド、ボタン、およびフォームを送信する別のAjaxスクリプトを含むフォームが含まれています。注入されたフォームのボタンを押して2番目のスクリプトを開始することは可能ですが、スクリプトはidによってフォーム入力を見つけられないようです。 JQueryの.on（）メソッドについて読んでいますが、要素ではなく、動的に更新される関数へのアクセスのみを提供するようです。この要素をAjaxリクエストでコードに挿入した後、入力要素をIDで取得するにはどうすればよいですか？Ajaxでフォームを入力し、その入力値を取得

メインページ：#outputのHTMLに注入

<div id="output"></div> 
<span id="call_account">Account</span> 


$("#call_account").click(function(){ 
    $.get('/accounts/login/', {}, function(data){ 
       $('#output').html(data); 
      }); 
});

：私はフォームを送信しようとすると、

<input id="id_username" name="username" type="text"> 
<input id="id_password" name="password" type="password"> 
<span id="account_submit">Submit</span> 


     $("#account_submit").on("click", function() { 

      var id_username = $('#id_username').val(); 
      var id_password = $('#id_password').val(); 

      $.ajax({ 
       type:"POST", 
       url:"/accounts/login/", 
       data: { 
         'username': id_username, 
         'password': id_password, 
         }, 
       success: function(data){ 
         $('#output').html(data); 
       } 
      }); 

     }); 
    });

id_usernameとid_passwordは未定義です。

編集：下の人からのおかげで、私はそれを動作させることができました。 https://jsfiddle.net/hn1Lrkzs/ 将来的に誰かを助けてくれることを願っています。私は直接答えを見つけるのに苦労し、ヘルプファイルからそのことを理解することができませんでした。

出典

2016-08-25 Vémundr

スクリプトタグ（

の内側にあなたのJSを囲みます。

$(document).on("click", "#account_submit", function() { 
     var id_username = $('#id_username').val(); 
     var id_password = $('#id_password').val(); 
     $.ajax({ 
      type: "POST", 
      url: "/accounts/login/", 
      data: { 
       'username': id_username, 
       'password': id_password, 
      }, 
      success: function (data) { 
       $('#output').html(data); 
      } 
     }); 

    });

例：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<script> 
 
$(document).on("click", "#account_submit", function() { 
 
    console.log('delegated event: works'); 
 
}); 
 

 

 
$("#account_submit").on("click", function() { 
 
    console.log('direct event: works'); 
 
}); 
 
    
 
</script> 
 

 
<input id="id_username" name="username" type="text"> 
 
<input id="id_password" name="password" type="password"> 
 
<span id="account_submit">Submit</span>

出典

2016-08-25 10:58:48 gaetanoM

ありがとう、その解決策もうまく動作します。 –

Ajaxでフォームを入力し、その入力値を取得

関連する問題