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() {

这样，实际事件将附加到文档中，并会找到新添加的元素。

将新行添加到表时jQuery无法正常工作

1 个答案: