Javascript 为什么append方法会复制我的onclick事件结果，尽管我在单击之前将div设置为空？

一个循环在数组中运行，如果用户名需要从api获取对每个用户名的请求。然后id为StreamRoffline的div被设置为空。现在我单击按钮offline并获得所有脱机用户的列表。但是，当我再次单击按钮时，数据只会附加到上一次单击事件中，而不会为空。有人能帮我吗

 $(document).ready(function() {
// solution with call back function
var streamers = ["streamerhouse","ESL_SC2", "freecodecamp", "Test_channel"];
var offlineChannels = "";
$('#streamerOffline').empty();
//Getting the twtich requests
for (i=0; i < streamers.length; i++){
$.getJSON('https://wind-bow.glitch.me/twitch-api/streams/'+streamers[i]+'', callData);

} //end for loop
$('#streamerOffline').empty();
function callData(data)
{
   $('#streamerOffline').empty();
    $(document).on('click', '#offlineNow', function(){ 

       if(data["stream"] === null){ 

             offlineChannels = "<p>"+data["_links"]["channel"]+"</p>";
             $('#streamerOffline').append(offlineChannels);     
       }


    });  

      $(document).on('click', '#onlineNow', function(){


       if (data["stream"] !== null ){

         if ( $('#streamerOnline').text() === null){
           alert("empty");
         }
         $('#streamerOnline').append("<p>"+data["stream"]["channel"]["status"]+"</p>");      

      }          
     });                 
}                
});

$（文档）.ready（函数（）{
//具有回调功能的解决方案
var拖缆=[“拖缆住宅”、“ESL_SC2”、“freecodecamp”、“测试_通道”]；
var offlineChannels=“”；
$（'#streamroffline'）.empty（）；
//获取twtich请求
对于（i=0；i”；
$（'#streamroffline'）。追加（脱机频道）；
}
});  
$（文档）.on（'单击'，'在线下'，函数（））{
如果（数据[“流”]！==null）{
如果（$（'#StreamRonline'）。text（）==null）{
警报（“空”）；
}
$（“#StreamRonline”）。追加（“”+数据[“流”][“通道”][“状态”]+”
”）；
}          
});                 
}                
});

更新： 我尝试在if语句本身中将id设置为空，但因为每次for循环运行时它都是空的。只剩下两个预期结果中的一个

 $(document).on('click', '#offlineNow', function(){ 

       if(data["stream"] === null){ 
               $('#streamerOffline').empty();
             offlineChannels = "<p>"+data["_links"]["channel"]+"</p>";
              $('#streamerOffline').append(offlineChannels);        
       }


    });

$（document）.on（'click'，'offlineNow'，function（）{
如果（数据[“流”]==null）{
$（'#streamroffline'）.empty（）；
离线频道=“”+数据[“_链接”][“频道”]+“
”；
$（'#streamroffline'）。追加（脱机频道）；
}
});

总是在清除以前的数据后追加

$(document).on('click', '#offlineNow', function(){ 
       if(data["stream"] === null){ 
             offlineChannels = "<p>"+data["_links"]["channel"]+"</p>";
             $('#streamerOffline').empty().append(offlineChannels);     
       }
});  

$（document）.on（'click'，'offlineNow'，function（）{
如果（数据[“流”]==null）{
离线频道=“”+数据[“_链接”][“频道”]+“
”；
$（'#streamroffline'）.empty（）.append（脱机通道）；
}
});  

我认为在每次迭代中添加一个新的事件侦听器没有多大意义，特别是因为它正在做同样的事情。我建议您创建一个包含所有用户/拖缆的阵列，并根据单击的“按钮”（或任何

#streamerOffline

进行过滤：

var users = [];

// add each user to "users" array
for (i=0; i < streamers.length; i++){
    $.getJSON('https://wind-bow.glitch.me/twitch-api/streams/'+streamers[i], function(user) {
        users.push(user);
    });
}

$(document).on('click', '#offlineNow', function() {
    var offlineUsers = users.filter(function(user) {
        return user.stream === null;
    });
    $('#streamerOffline').append(
        offlineUsers.map(function(user) {
            return '<p>' + user._links.channel + '</p>';
        })
    );
});

$(document).on('click', '#onlineNow', function() {
    // get users who are offline (stream !== null)
    var onlineUsers = users.filter(function(user) {
        return user.stream !== null;
    });
    $('#streamerOnline').empty().append(
        onlineUsers.map(function(user) {
            return '<p>' + user.stream.channel.status + '</p>';
        })
    );
});

var用户=[]；
//将每个用户添加到“用户”数组
对于（i=0；i；
})
);
});
$（文档）.on（'单击'，'在线下'，函数（））{
//获取脱机用户（流！==null）
var onlineUsers=users.filter（函数（用户）{
返回user.stream！==null；
});
$（'#streamerOnline'）.empty（）.append(
onlineUsers.map（函数（用户）{
返回“”+user.stream.channel.status+”
”；
})
);
});

我以前尝试过这个建议，但是如果我有两个结果，则只会显示其中一个结果，因为循环后，一旦清空div并将任何内容放入循环的另一个迭代中。旁注：您可以使用点符号来节省一些不必要的键入：例如，

数据。_links.channel

，

data.stream.channel.status

，应该为动态属性名称保留括号符号。好的，谢谢您提供的信息