如何动态绑定Jquery事件

Question

我已经动态生成了表格，

<c:forEach var="user" items="${usermap}">
  <tr>
    <td>${user.getUserName()}</td>
    <td>${user.getIsActive()}</td>
    <td class="status">${user.getBadLoginAttempts()}</td>
    <c:choose>
    <c:when test="${user.getBadLoginAttempts()=='Active'}">
    <td><a href="#" class="btn btn-sm btn-primary unlockBtn" id="togBtn_${user.getUserName()}" >Lock</a></td>
    </c:when>
    <c:otherwise>
    <td><a href="#" class="btn btn-sm btn-primary unlockBtn" id="togBtn_${user.getUserName()}" >UnLock</a></td>
    </c:otherwise>
    </c:choose>
  </tr>
</c:forEach>

我在点击链接时做一些数据库操作，它工作正常。所以脚本是，

 $(document).ready(function(){
$(document).on('click','.unlockBtn',(function (e) {
   //get the user id
   var $this = $(this);
   var userStatus=$(this).closest('tr').find('td:eq(2)').text();
   if(userStatus=='Active'){
       alert("Active in if");
       alert(userStatus);
       $.post('<%=request.getContextPath()%>/controller/UserLockController',{'userName':$(this).closest('tr').find('td:eq(0)').text()},
                function(data)
                {
                  $this.closest('tr').find('.status').html(data);
                  $this.closest('tr').find('td:eq(3)').replaceWith("<td><a href='#' class='btn btn-sm btn-primary unlockBtn' >Unlock</a></td>");

                });
   }
   else{
       alert(userStatus);
       $.post('<%=request.getContextPath()%>/controller/UserUnlockController',{'userName':$(this).closest('tr').find('td:eq(0)').text()},
                function(data)
                {
                  $this.closest('tr').find('.status').html(data);
                  $this.closest('tr').find('td:eq(3)').replaceWith("<td><a href='#' class='btn btn-sm btn-primary unlockBtn' >Lock</a></td>");

                });
   }
}));
 });

所以每个功能都很好。我面临的问题是每一行我只能锁定或解锁一次。我一直想知道如何实现它。请帮帮我。

Answer 1

试试这个：

$(document).on("click", ".generateTable tr", function () {

 // Your code

});

Click 事件可以替换为任何你想要的 jquery 事件。

Answer 2

事件委托工作正常。所以，我唯一能想到的就是：

1. 从您的帖子返回并替换“状态”列的 html 的数据并未将该列的值设置为“活动”，因此 if 语句不运行 （这是我会开始寻找） 或
2. 在某些奇怪的浏览器中发生了一些奇怪的事情，导致在您替换整个表格列时事件委托失败。我无法想象这确实是这种情况，但我突然想到您可以大大简化您的代码，但只需更新链接的文本而不是替换整个<td>。

所以，我建议更改这一行：

$this.closest('tr').find('td:eq(3)').replaceWith("<td><a href='#' class='btn btn-sm btn-primary unlockBtn' >Unlock</a></td>");

这一行：

$this.closest('tr').find('td:eq(3)').replaceWith("<td><a href='#' class='btn btn-sm btn-primary unlockBtn' >Lock</a></td>");

到：

$this.text("Unlock");

和：

$this.text("Lock");

这种方式更具可读性。这是fiddle 的示例。