I have a table and a button on click of which I can add row to the table. Each row in table has around 5 columns. I have two dropdowns in each row value of one dropwdown affects the value in the other dropdown. This jquery is not working for the new added rows but however is working for the existing rows. Can anyone help me in identifying what have I missed. The code is as below:
JQuery on the first dropdown:
<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>
