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

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

从您的帖子返回并替换您的＆＃34;状态＆＃34;的html的数据column未将列的值设置为＆＃34; Active＆＃34;因此，if语句不会运行（这是我开始寻找的地方）或
在一些奇怪的浏览器中发生了一些奇怪的事情，导致事件委托在替换整个表列时失败。我无法想象这是真的情况但是我发现你可以大大简化你的代码，只是更新链接的文本而不是替换整个<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。

如何动态绑定Jquery事件

2 个答案: