Laravel 5.2/jQuery - 在新的更改事件中使用Ajax成功创建的访问DOM元素

Question

我一直在编码多年，但仅在最近几个月才开始研究JavaScript/jQuery/Ajax。我已经搜索了几天，但是我看到的答案都不匹配我想要做的（据我所知）。

我有一个选择从控制器获取议程列表。选择议程后，会触发Ajax调用以从数据库中获取相关主题，并将其作为无线电输入添加到预定义的div中。 “每个组的时间分配”已经有一个单选按钮组，根据您选择的选项，显示正确的输入字段集合。

这适用于添加信息，但现在我想编辑同一页上的现有记录。因此，现在我想选择一个议程，获取主题，让系统检查是否已经为我选择的主题分配了时间。如果有，则显示预加载数据的正确字段。如果不是，请将其视为“添加”表单。

我的选择按预期工作，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"); 
});