Laravel 5.2/jQuery - 新しい変更イベントでAjaxの成功で作成されたDOM要素にアクセス

Question

私は何年もコーディングしてきましたが、最近数ヶ月でJavaScript/jQuery/Ajaxを調べ始めました。私は数日間捜し求めましたが、私が見ている答えのどれも（私が見る限り）私がしようとしているものと一致しません。

コントローラからアジェンダのリストを取得するselectがあります。アジェンダが選択されると、Ajaxコールがトリガされ、データベースから関連するサブジェクトが取得され、定義済みのdivに無線入力として追加されます。 「グループごとの時間割り当て」のラジオボタングループが既にあります。選択したオプションに応じて、正しい入力フィールドセットが表示されます。

これは情報の追加には問題ありませんが、今は同じページで既存のレコードを編集したいと考えています。だから今私は議題を選び、科目を取って、私が選んだ科目のために既に時間割り当てがあるかどうかシステムのチェックをします。存在する場合は、データがプリロードされた正しいフィールドを表示します。そうでない場合は、Addフォームのように扱います。

Ajaxコールでも必要なラジオボタンが作成されますが、新しく作成されたラジオボタンにアクセスして、そのエレメントで新しいAjaxコールを開始し、割り当て済みかどうかを確認するにはどうすればよいですか？

<form accept-charset="UTF-8" class="form-horizontal"> 
    {{ csrf_field() }} 
    <div class="form-group"> 
     <label for="agenda" class="col-sm-3 control-label">Agenda</label> 
     <div class="col-sm-6"> 
      <select class="form-control" id="agenda" name="agenda"> 
       <option value="">Selecteer een agenda</option> 
       @foreach($agendas as $key => $value) 
        <option value="{{ $key }}">{{ $value }}</option> 
       @endforeach 
      </select> 
     </div> 
    </div> 
</form> 
<form method="POST" action="{{ action('TimeController@store') }}" accept-charset="UTF-8" class="form-horizontal"> 
    {{ csrf_field() }} 
    <div class="form-group"><div id="insertSubjects"></div></div> 
    <div class="form-group"> 
     <label for="all_type" class="col-sm-3 control-label">Allocatie type</label> 
     <div class="col-sm-6"> 
      <input type="radio" name="type" id="user" value="1"> User<br> 
      <input type="radio" name="type" id="fraction" value="2"> Fractie<br> 
      <input type="radio" name="type" id="oppcoa" value="3"> Oppositie/Coalitie 
     </div> 
    </div> 
    <div id="insertFields"></div> 
    <div class="form-group"> 
     <div class="col-sm-offset-3 col-sm-6"> 
      <input class="btn btn-default" type="submit" value="Voeg toe"> 
     </div> 
    </div> 
</form> 

JAVASCRIPT

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#agenda').on('change', function() { 
      var agenda = $('#agenda option:selected').attr('value'); 
      var my_url = window.location.pathname + '/agenda/' + agenda; 

      $.ajax({ 
       type: "post", 
       url: my_url, 
       headers: {'X-CSRF-TOKEN': $('input[name=_token]').val()}, 
       dataType: 'json', 
       context: this, 
       success: function (data) { 

        var fields = '<label for="subject" class="col-sm-3 control-label">Selecteer onderwerp</label>' + 
          '<div class="col-sm-6">'; 

        jQuery.each(data, function (k, v) { 
         fields += '<input type="radio" name="subject" value="' + v.id + '" class="subject_radio"> ' + v.subject + '<br>'; 
        }); 

        fields += '</div>'; 

        $('#insertSubjects').html(fields); 
        $('input:radio[name=subject]:first').attr('checked', true); 
       } 
      }) 
     }); 

     $('input[type=radio][name=type]').change(function() { 
      var fields; 
      if (this.id == 'user') { 
       fields = '<div class="form-group"><label for="per_user" class="col-sm-3 control-label">Per lid</label><div class="col-sm-6"><input type="text" name="per_user" id="per_user" /></div></div>'; 
      } 
      else if (this.id == 'fraction') { 
       fields = '<div class="form-group"><label for="NDP" class="col-sm-3 control-label">NDP</label><div class="col-sm-6"><input type="text" name="NDP" id="NDP" /></div></div>' + 
         '<div class="form-group"><label for="VHP" class="col-sm-3 control-label">VHP</label><div class="col-sm-6"><input type="text" name="VHP" id="VHP" /></div></div>' + 
         '<div class="form-group"><label for="ABOP" class="col-sm-3 control-label">ABOP</label><div class="col-sm-6"><input type="text" name="ABOP" id="ABOP" /></div></div>' + 
         '<div class="form-group"><label for="PL" class="col-sm-3 control-label">PL</label><div class="col-sm-6"><input type="text" name="PL" id="PL" /></div></div>' + 
         '<div class="form-group"><label for="BEP" class="col-sm-3 control-label">BEP</label><div class="col-sm-6"><input type="text" name="BEP" id="BEP" /></div></div>' + 
         '<div class="form-group"><label for="NPS" class="col-sm-3 control-label">NPS</label><div class="col-sm-6"><input type="text" name="NPS" id="NPS" /></div></div>' + 
         '<div class="form-group"><label for="PALU" class="col-sm-3 control-label">PALU</label><div class="col-sm-6"><input type="text" name="PALU" id="PALU" /></div></div>' + 
         '<div class="form-group"><label for="DOE" class="col-sm-3 control-label">DOE</label><div class="col-sm-6"><input type="text" name="DOE" id="DOE" /></div></div>' + 
         '<div class="form-group"><label for="Onbekend" class="col-sm-3 control-label">Onbekend</label><div class="col-sm-6"><input type="text" name="Onbekend" id="Onbekend" /></div></div>'; 
      } 
      else if (this.id == 'oppcoa') { 
       fields = '<div class="form-group"><label for="Coalitie" class="col-sm-3 control-label">Coalitie</label><div class="col-sm-6"><input type="text" name="Coalitie" id="Coalitie" /></div></div>' + 
         '<div class="form-group"><label for="Oppositie" class="col-sm-3 control-label">Oppositie</label><div class="col-sm-6"><input type="text" name="Oppositie" id="Oppositie" /></div></div>' + 
         '<div class="form-group"><label for="Neutraal" class="col-sm-3 control-label">Neutraal</label><div class="col-sm-6"><input type="text" name="Neutraal" id="Neutraal" /></div></div>'; 
      } 

      $('#insertFields').html(fields); 
     }); 
    }); 


</script> 

すべてのAjaxリクエストがちょうどデータベースからJSONエンコードされたデータを返しますが、あなたたちはあまりにもこれらの呼び出しを確認する必要がある場合は、私に聞かせてを選択知っている。正しい方向に私を案内してください...

Answer 1

新しく作成されたラジオボタンを保持する配列を作成することができます。

var newRdoBtnsArr = []; // Array to hold the newly created new radio buttons 

$.ajax({ 
    . 
    . 
    . 
    . 
    success: function (data) { 

     var newRdoBtn = '<input type="radio" name="subject" value="' + v.id + '" class="subject_radio"> '; 

     newRdoBtnsArr.push($(newRdoBtn)); // Push the radio button as jQuery object 

     fields += newRdoBtn + v.subject + '<br>'; 
    . 
    . 
    . 
    . 
}); 

コメントの後の更新：

私はあなたが新たに作成されたラジオボタンに変更があったとき、AJAX呼び出しを実行する必要があると思います。その場合は、以下の行を追加して試すことができます。あなたと同じように$('input[type=radio][name=type]').change(function() {

$('body').on('change', 'input:radio[name=subject]', function() { 
    console.log("It works"); 
});