Thymeleaf模板引擎下 使用局部刷新后 jQuery事件绑定失效的问题

前端页面：

<table class="table" th:fragment="user_content">
     <thead class=" text-primary">
          <th>用户名</th>
          <th>密码</th>
          <th>手机号码</th>
          <th>邮箱</th>                                  
          <th>操作</th>
     </thead>
     <tbody th:each="user:${userList}" >
          <tr>
              <td th:text="${user.userName}" class="username"></td>
              <td th:text="${user.userPassword}"></td>
              <td th:text="${user.userPhone}"></td>
              <td th:text="${user.userEmail}"></td>
              <td>
                 <button class="btn btn-success" data-toggle="modal"
     data-target="#modifyusers" th:attr="user_id=${user.userId}">修改
                 </button>
                 <button class="btn btn-danger" th:attr="user_id=${user.userId}">删除</button>
              </td>
           </tr>
     </tbody>
 </table>

 这里需要注意的是：绑定事件不能使用

$("button[class='btn btn-danger']").on('click',function () {

//statements

});

因为局部刷新table表格后JQ识别不到元素，js事件不会触发，因为它已经替换了，因此，此时需要使用下面方式来进行事件绑定
 

 $(document).on('click',"button[class='btn btn-danger']", function () {

//statements

});

$('父元素').on(event_type,selector,function(e){});

event_type:为事件类型

selector：从父元素下逐级定位到绑定的元素

这样也叫做事件代理或事件委托，只要父元素不变，子元素替换，符合绑定的选择器还是能够触发事件，并不受影响，因为$(document)已经加载了页面的所有元素，后面局部刷新再怎么变，按钮还是能够触发事件。

 

// 点击删除按钮
        $(document).on('click',"button[class='btn btn-danger']", function () {
        // $("button[class='btn btn-danger']").on('click',function () {  
            //debugger 

            var user_id = $(this).attr("user_id");
            console.log(user_id);

            var url = "deleteUser";
            $.ajax({
                url:url,
                data:{"user_id":user_id},
                type:'POST',
                success:function (data) {
                    
                    $(".table").html(data);

                    $('#modifyusers').modal('hide');
                    alert("删除成功！")
                }
            })


        });

 

Controller中

@RequestMapping(value="/deleteUser",method = RequestMethod.POST)
    public String deleteUser(HttpServletRequest request,@RequestParam(value="user_id")String userId,ModelMap model){
        userService.deleteUserById(userId);
        List<User> userList = userService.getAllEmployee();
        int currentPage = (Integer) request.getSession().getAttribute("currentPage");
        PageUtil pg = new PageUtil(userList,currentPage);
        model.addAttribute("userList",pg.getList());
        return "admin/usermng::user_content";// 返回fragment
    }