How to bind Jquery event dynamicaly

Question

I have dynamically generated table ,

<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>

I am doing some db operation on click of link its working fine. So script is,

 $(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>");

                });
   }
}));
 });

So every functionality is fine . The problem I m facing is for every row I am able to lock or unlock only once. I want it all the time how to achieve it . please help me.

instead of using document.ready try to use something like that $(document).bind('DOMSubtreeModified', function () {} — Su4p, Jun 03 '14 at 11:04
Be careful with which version of jQuery you are using. Deprecation comes in here: http://api.jquery.com/on/ — Harry Lincoln, Jun 03 '14 at 11:11

score 0 · Answer 1 · edited Jun 03 '14 at 11:47

0

Try this:

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

 // Your code

});

Click event can be replaced by any jquery event you want.

edited Jun 03 '14 at 11:47

vrajs5

4,066
1
27
44

answered Jun 03 '14 at 11:26

user3609351

169
1
10

score 0 · Answer 2 · answered Jun 03 '14 at 12:01

0

The event delegation works fine. So, the only thing I can think of is that either:

the data that is getting returned from your post and replacing the html of your "status" column is not setting the value of the column to "Active" and therefore the if statement doesn't run (this is where I'd start looking) OR
there's some weird thing happening in some weird browser that is causing the event delegation to fail when you replace the entire table column. I can't imagine that this is really the case BUT it occurs to me that you can vastly simplify your code, but just updating the text of the link rather than replacing the entire <td>.

So, I'd suggest changing this line:

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

and this line:

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

to:

$this.text("Unlock");

and:

$this.text("Lock");

It's way more readable that way. Here's a sample fiddle.

answered Jun 03 '14 at 12:01

jme11

17,134
2
38
48

K . . The problem is I am able to lock or unlock only once in evry row , – user3599482 Jun 03 '14 at 12:17
in fiddel it is static tab it works fine , I think in my case dynamic table giving some pbm . – user3599482 Jun 03 '14 at 12:21
I know, hence the reason I suggested looking at what you are returning in your post data and setting as the html for the column that is being used as the condition in your if statement. If it works the first time, but not subsequent times, then that would cause me to look at what's different between the first time and second time you click. It's not the event delegation, and since everything else works to the extent testable, I'd look at that first. – jme11 Jun 03 '14 at 12:21
I suppose it could be your dynamic table, but since your event delegation is waiting for the event to bubble all the way to the document (and it works at least once), I had ruled that out. Why don't you test with a static table and see if that works, then you'll know for sure. – jme11 Jun 03 '14 at 12:23
Actually, that gives me one other idea to test... see if you have different results when attaching your handler to some ancestor element that's definitely on the page when the DOM is ready, such as $('body').on('click', '.unlockBtn' ... – jme11 Jun 03 '14 at 12:32
no it is same effect, now I removed my condition for `` then also same pbm – user3599482 Jun 03 '14 at 12:33
no I changed to $('body').on('click', '.unlockBtn' ... it doesnt work – user3599482 Jun 03 '14 at 12:37
I didnt get "Actually, that gives me one other idea to test... see if you have different results when attaching your handler to some ancestor element that's definitely on the page when the DOM is ready, such as $('body').on('click', '.unlockBtn' ... " – user3599482 Jun 03 '14 at 12:46
Well, you've got me stumped but I'm not a jstl/java expert, so maybe there's something in the lifecycle that I'm not aware of that's preventing it from running. Maybe retag the question so someone with expertise in those areas can take a look at it. Sorry I couldn't help. – jme11 Jun 03 '14 at 12:53

How to bind Jquery event dynamicaly

2 Answers2