Thymeleaf异步请求发生灵异事件?

thymeleaf进行异步请求局部刷新页面后,checkbox的事件失效。

页面截图:

图片说明

<!-- HTML-->
<td class="col-lg-1">
        <input type="checkbox" name="cacheAllRoles"/>
</td>

<!-- JS-->
<script type="text/javascript">
    // 全选\全不选 cacheAllRoles

    $("input[name='cacheAllRoles']").on("click", function () {
            if ($(this).is(':checked')) {
                    $('input[name="roleCheck"]').each(function () {
                            $(this).prop("checked", true);
                    });
            } else {
                    $('input[name="roleCheck"]').each(function () {
                            $(this).prop("checked", false);
                    });
            }
    });
</script>

页面初始化完成时,该事件是可用的;
当异步请求成功后,页面刷新完成,的事件失效。

我不知道我的问题描述的是否详细,反正就是很灵异。
前端白痴,不知道怎么排查......

补充说明:这部分是异步请求的代码

<!-- Role Table -->
<div class="col-lg-4">
<div id="roleTable" th:fragment="roleTable">
<table class="table table-striped">
<thead>
<tr>
<td class="col-lg-1">
<input type="checkbox" name="cacheAllRoles"/>
</td>
<td class="col-lg-1">ID</td>
<td class="col-lg-2" width="">角色名称</td>
<td class="col-lg-2">描述</td>
<td class="col-lg-2">配置</td>
</tr>
</thead>
<tbody>
<tr th:each="roles:${roleList}">
<td>
<input type="checkbox" th:checked="${roles.configFlag}" th:value="${roles.roleId}" name="roleCheck">
</td>
<td th:text="${roles.roleId}"></td>
<td th:text="${roles.roleName}"></td>
<td th:text="${roles.roleDescription}"></td>
<td>config</td>
</tr>
</tbody>
</table>
</div>
</div>

//获取角色列表
function configRole(userId, username) {
$("#roleTable").load("/urpCfgCtrl/getRoleListByUserId", {"userId": userId});
}

1个回答

我现在猜想有可能是因为你的$("input[name='cacheAllRoles']")这个是动态创建出来的,所以绑定事件需要用$("body").on("click","input[name='cacheAllRoles']",function(){});

helianzunfei
Honey_Rush 神了,解决了!
3 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!