javascript - <li>单击功能在ajax之后不起作用[事件委托(delegate)问题]

This question already has answers here:

Events triggered by dynamically generated element are not captured by event handler
（5个答案）
6年前关闭。
在我的网页中，我每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>

最佳答案

委派活动
替换

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

具有

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

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