Создайте функцию или событие для динамически создаваемых полей jQuery

Question

У меня есть форма карточки с метриками на нем. Вопрос о показателях динамически заполняется и вытаскивается из базы данных. Я использую Laravel, Мой код:

$agent_options = array('' => 'Choose One') + DB::table('agents')->lists('name','id'); 
$metrics = Metric::where('campaign_id','=',1)->orderBy('id', 'asc')->get(); 
return view('scorecard.create')->with(array('agent_options'=>$agent_options, 'metrics'=>$metrics)); 

Тогда на мой взгляд

@foreach($metrics as $key => $value) 
<tr> 
    <td class="col-md-2">{{$value->criteria}}</td> 
    <td class="col-md-4">{!!$value->description!!}</td> 
    <td class="col-md-4">{!!$value->question!!}</td> 
    <td class="col-md-2"> 
     <select class="form-control" name="tl_assessment[]"> 
      <option value="">Choose One</option> 
      <option value="Yes">Yes</option> 
      <option value="No">No</option> 
      <option value="N/A">N/A</option> 
     </select> 
    </td> 
    <td class="col-md-3">{{$value->potential_points}}</td> 
    <td class="col-md-3"><input type="text" class="form-control" name="score[]"></td> 
</tr> 
@endforeach 

Как вы можете видеть, что я творю также tl_assessment выпадающие, что для меня, чтобы записать, если показатели были встречены ответив Да, нет, нет. Затем вы можете увидеть potential_points.

Мое требование: если выбрано Да и N/A, то значение score будет таким же в potential_points.

Я довольно новичок в jquery, и я мог бы сделать это, если эти поля являются статическими. Но я смущаюсь, с чего начать.

Answer 1

Дайте td где у вас есть потенциальный класс potential. Дайте input с именем score[] класс score.

Он должен закончить тем, что, как следующее ...

<tr> 
    <td class="col-md-2">Test</td> 
    <td class="col-md-4">Test</td> 
    <td class="col-md-4">Test</td> 
    <td class="col-md-2"> 
     <select class="form-control ts_assessment" data-key="test" name="tl_assessment[]"> 
      <option value="">Choose One</option> 
      <option value="Yes">Yes</option> 
      <option value="No">No</option> 
      <option value="N/A">N/A</option> 
     </select> 
    </td> 
    <td class="col-md-3 potential">35</td> 
    <td class="col-md-3"><input type="text" class="form-control score" name="score[]"></td> 
</tr> 

Тогда вам нужно просто нужно добавить следующий сценарий.

<script> 
    $(document).ready(function() { 

     $('.ts_assessment').change(function() { 
      var val = $(this).val(); 
      var parent = $(this).parents('tr'); 

      if (val == 'Yes' || val == 'N/A') { 
       var potential = parent.find('.potential').text(); 
       parent.find('.score').val(potential);    
      } else { 
       parent.find('.score').val(''); 
      } 
     }); 
    }); 
</script>