click function not working after ajax[Event delegation issue]

Question

In my webpage i am updating the contents of an unordered list $.get() every 5 seconds. The problem is the click function for the list items is not working. The list items are getting updated fine as they should but something is wrong with the click function

       $(document).ready(function(){
           $(".request").click(function(){
            alert("hello");
                        //do some stuff
                      });


          window.setInterval(function() {
         $.get('/changeListItems/',function(data,status){

            //alert(data[0]);
            $('#collabRequests > li').remove();
              for(user in data)
              $('#collabRequests').append('<li class=\"request\">'+'user-'+data[user]+' wants to collaborate!'+'</li>');

            });
        },5000);   
 });


   <!-- Html snippet -->
     <div id="invitedUsers">
    <h2> List of users you have invited for this page</h2>  
    <ul id="collabRequests">        

    </ul>   
   </div>

score 5 · Accepted Answer · answered Jul 08 '13 at 19:34

5

Delegate the event

Replace

$(".request").click(function(){

with

$(document).on("click", ".request", function(){

Still better.. Replace the document with a static ancestor that is present on the page at the time the event was bound.

answered Jul 08 '13 at 19:34

Sushanth --

55,259
9
66
105

1

for the billionth time.... – bluetoft Jul 08 '13 at 19:35
I know.. There are so many posts out there related to this issue. – Sushanth -- Jul 08 '13 at 19:36
@Sushanth-- whats the difference? – ishan3243 Jul 08 '13 at 19:36
@user2545792 because the element is dynamically created, you need to do it this way – Zevi Sternlicht Jul 08 '13 at 19:36
Events are only bound to the elements that are available on the page at the time the events are bound. in your case when a new `request` element is created. Events are bound to the elements and not to the class – Sushanth -- Jul 08 '13 at 19:38
Note: If you are using a version of JQuery that is older than 1.7, use `.delegate()` instead of `.on()`. Also, you would need to swap the first two parameters of the function, if you do (i.e., `$(document).delegate(".request", "click", function() { . . .`). – talemyn Jul 08 '13 at 20:33

score 1 · Answer 2 · answered Jul 08 '13 at 19:37

1

Your selector, $(".request") is evaluated once. It does not periodically scan the DOM to find new elements with that class and attach click handlers to them. You are dynamically modifying the contents and not reattaching your handler.

answered Jul 08 '13 at 19:37

Steve H.

6,912
2
30
49

score 1 · Answer 3 · answered Jul 08 '13 at 19:38

The issue is that you're trying to attach an event handler directly on elements that do not exist in the DOM at the time that you're listening for their events.

As Sushanth suggested, the best way to handle events on dynamically injected DOM nodes is to simpy delegate them.

The other option is to bind the event handler at the time you add the new node to the DOM, but this can quickly get expensive if you're adding/removing many nodes. You'll also need to remember to unbind event handlers whenever an element is removed from the DOM tree or else your script may end up leaking memory.

click function not working after ajax[Event delegation issue]

3 Answers3