當一個新行被添加到表中時，jQuery不工作

Question

我有一個表和一個按鈕，點擊它可以向表中添加行。表中的每行都有大約5列。我有兩個下拉列表中的每一行的下拉值會影響另一個下拉列表中的值。這個jquery不適用於新添加的行，但是對現有行起作用。任何人都可以幫助我確定我錯過了什麼。該代碼是如下：

JQuery的第一下拉：

<script> 
    $('.notify').on('change', function() { 
     alert('hi'); 
     var interval = $(this).closest('td').next().closest('td').next().find('select'); 
     if ($(this).val() == 'A' || $(this).val() == 'C') { 
      interval.val('0'); 
      interval.prop("disabled", true); 
     } else { 
      interval.prop("disabled", false); 
     } 
    }); 
</script> 

HTML：

<table id="table" style="border: 1px solid white;"> 
    <caption style="text-align:right">     
     <button id="addRowBtn" type="button" 
       class="btn btn-primary">Add Row</button> 
     <button id="deleteRowBtn" type="button" 
       class="btn btn-primary">Delete Row</button> 
    </caption> 
    <thead> 
     <tr> 
      <th style="text-align: center;width:5px;background-color: #337AB7"> 
       <input type="checkbox" id="checkAll" name="checkAll" /> 
      </th> 
      <th style="width:25%;text-align:center;background-color: #337AB7;color: white" >User</th>       
      <th style="width:25%;text-align:center;background-color: #337AB7;color: white" >Email Address</th> 
      <th style="text-align:center;background-color: #337AB7;color: white" >Notification Type</th> 
      <th style="width:8%;text-align:center;background-color: #337AB7;color: white" >Receive</th> 
      <th style="width:8%;text-align:center;background-color: #337AB7;color: white" >Reminder Interval (in days)</th>              
      <th style="text-align:center;background-color: #337AB7;color: white">Created By</th> 
     </tr> 
    </thead> 
    <tbody>                         
     <tr class="tremail" th:each="emailmaster, stat : ${emailGrp.emailMasterList}" > 
      <td align="center"> 
       <input type="checkbox" class="form-control check" id="chkEmailMaster"/> 
      </td> 
      <td> 
       <input type="text" class="form-control emailuser" th:name="emailMasterList[__${stat.index}__].user_id" th:value="${emailmaster.user_id}"/> 
      </td> 
      <td> 
       <input type="text" class="form-control" th:name="emailMasterList[__${stat.index}__].email_address" th:value="${emailmaster.email_address}" readonly="readonly"/> 
      </td> 
      <td> 
       <select class="form-control notify" th:field="${emailGrp.emailMasterList[__${stat.index}__].notification_type}">                 
        <option value="">Select</option> 
        <option th:each="nMap : ${notificationMap}" th:value="${nMap.key}" th:text="${nMap.value}"></option> 
       </select> 
      </td> 
      <td> 
       <input type="checkbox" style="height: 15px;margin-top: 10px;" class="form-control" th:name="emailMasterList[__${stat.index}__].receive_flg" th:checked="${emailmaster.receive_flg}"/> 
      </td> 
      <td> 
       <select class="form-control" th:field="${emailGrp.emailMasterList[__${stat.index}__].reminder_interval}"> 
        <option th:value="0">0</option> 
        <option th:value="1">1</option> 
        <option th:value="2">2</option> 
        <option th:value="3">3</option> 
        <option th:value="4">4</option> 
        <option th:value="5">5</option> 
        <option th:value="6">6</option> 
        <option th:value="7">7</option> 
        <option th:value="8">8</option> 
        <option th:value="9">9</option> 
        <option th:value="10">10</option> 
       </select> 
      </td>              
      <td>                
       <input type="text" class="form-control" th:name="emailMasterList[__${stat.index}__].created_by" th:value="${emailmaster.created_by}" readonly="readonly"/> 
      </td> 
     </tr>             
    </tbody> 
</table> 

Answer 1

代表通過該文檔。

更改此：

$('.notify').on('change', function() { 

到這一點：

$(document).on('change', '.notify', function() { 

這樣，實際的事件被附加到文件，並會找到你新添加的元素。