延迟更改动作jQuery

Question

I am working on a project in Symfony. I have a table with some rows, and the end of each row there are four options. Based on the option chosen in each row, I want the color of the entire row to change. Now, this code works fine on jsfiddle, but however in my project, for each row, when I choose some option for the first time, there is no effect, the color does not change. When I choose some option the second time, the color changes. This is applicable for all rows. I want the color to change the first time itself like it is happening in jsfiddle. Link here: https://jsfiddle.net/wqeob4jo/2/

PS: I am using REACT JS

 $(document).ready(function() { $('select').change(function() { var selectedVal = this.value; if (selectedVal == "2") { $(this).closest('tr').removeClass().addClass('not_wanted') } else if (selectedVal == "3") { $(this).closest('tr').removeClass().addClass('not_available') } else if (selectedVal == "4") { $(this).closest('tr').removeClass().addClass('vacation') } else if (selectedVal == "5") { $(this).closest('tr').removeClass().addClass('priority_off') } }); }); 

 table td, th { border: 1px solid black; padding-left: 100px; } th { color: black; } tr.not_wanted { color: red; } tr.not_available { color: blue; } tr.vacation { color: orange; } tr.priority_off { color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <tr style="background-color:grey;"> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> <tr class="options"> <td>Date 1</td> <td>Date 2</td> <td> <select id="select"> <option value="2">not_wanted</option> <option value="3">not_available</option> <option value="4">vacation</option> <option value="5">priority_off</option> </select> </td> </tr> <tr class="options"> <td>Date 1</td> <td>Date 2</td> <td> <select id="select"> <option value="2">not_wanted</option> <option value="3">not_available</option> <option value="4">vacation</option> <option value="5">priority_off</option> </select> </td> </tr> </table> 

Answer 1

I fixed this issue by using

$(document).on('change','#select',function () {...

instead of

$('select').change(function() {...

full function:

$(document).on('change','#select',function () {
    var selectedVal = this.value;
    if (selectedVal == "2") {
      $(this).closest('tr').removeClass().addClass('not_wanted');
    } else if (selectedVal == "3") {
      $(this).closest('tr').removeClass().addClass('not_available');
    } else if (selectedVal == "4") {
      $(this).closest('tr').removeClass().addClass('vacation');
    } else if (selectedVal == "5") {
      $(this).closest('tr').removeClass().addClass('priority_off');
    }
  });

Hope it helps!