<li> ajax后点击功能不起作用[事件委托问题]

Question

在我的网页中,我每5秒更新一个无序列表$ .get()的内容.问题是列表项的单击功能不起作用.列表项目正在按照它们应该更新,但点击功能有问题

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

Answer 1

委派活动

更换

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

同

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

更好..用绑定事件时页面上存在的静态祖先替换文档.