如何将事件添加到附加元素答案

【问题标题】：how to add events to an appended element如何将事件添加到附加元素
【发布时间】：2017-01-11 19:37:03
【问题描述】：

这是我的代码：

function getChannelInfo(){ 
var name;
    var status;
    var logo;
    var game;
    var url;channels.forEach(function(channel){
function API(type,name){
  return 'https://api.twitch.tv/kraken/'+type+'/'+name+'?client_id=pd57d4ktf8rjarn9q3qgtv4owbr5q0';
};
$.getJSON(API("streams",channel),function(data){
    if(data.stream!==null){
       name=data.stream.channel.display_name;
       status=data.stream.channel.status;
       logo=data.stream.channel.logo;
       game=data.stream.channel.game;
       url=data.stream.channel.url;
    $("<div class='col-md-3 text-center'><a class='link'href='"+url+"' target='_blank'><img class='active' src="+logo+"></a><divclass='info'><h1 id='name' class='name'>"+name+"</h1><h2 class='game'>"+game+"</h2><h3 class='status'>"+status+"</h3></div></div>").appendTo('#channelsOn');
        } else {
$.getJSON(API("channels",channel),function(data1){
       name=data1.display_name;
       status="";
       logo=data1.logo;
       game="";
       url=data1.url;
var newContent = $("<div class='col-md-3 text-center offline'><aclass='link' href='"+url+"' target='_blank'><img class='noactive' src="+logo+"></a><div class='info'><h1 class='name'>"+name+"</h1><h2 class='game'>"+game+"</h2><h3 class='status'>"+status+"</h3></div></div>").appendTo("#channelsOff");
});
       }
});
  });
};
$(document).ready(function(){
  getChannelInfo();
 $('#channelsOn').on('mouseenter','img',function() {
   $('.info').animate({opacity:'1'});
 });
   $('#channelsOn').on('mouseout','img',function() {
   $('.info').animate({opacity:'0'});
});
  $('#channelsOff').on('mouseenter','img',function() {
   $('.info').animate({opacity:'1'});
 });
   $('#channelsOff').on('mouseout','img',function() {
   $('.info').animate({opacity:'0'});
     });
});
});

如何在不显示所有频道的所有信息的情况下使用鼠标输入 img 显示一个频道的信息。在我的代码中，当我超过一个 img 时，会显示来自所有频道的所有信息

【问题讨论】：

嗯 - 您的代码似乎存在一些问题。我可以在我的回答中告诉你，但如果没有更多信息，我无法解决的一个问题是：“通道”变量集在哪里？它包含什么？
@MacPrawn 频道来自数组 var channels=["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas "].

标签： javascript jquery css image

【解决方案1】：

好的，正如我在 cmets 中所说，您的代码有一些问题 - 但我会回到这个问题上。首先，你的问题。

问题是您的 mouseenter/mouseout 事件针对 all .info div...您只想针对被鼠标悬停的元素的 .info div。所以不是

$('.info').animate({opacity:'1'});

试试

$(this).parents('.col-md-3.text-center').children('.info').animate({opacity:'1'});

"$(this)" 在此上下文中将引用触发事件的 img。然后，您正在寻找该 img 及其 .info div (parents()) 的公共容器，然后从该容器中找到子“.info”。

您还需要从隐藏所有 .info 元素开始 - 最好的方法是通过 CSS，这样页面加载时就不会闪烁。

最后，我注意到您的代码中的一些错误：

...<divclass='info'>... // should be <div class='info'>

function API(type,name){ // should be var API = function(type,name){

希望这会有所帮助！

【讨论】：

【解决方案2】：

尝试使用parents() 方法，然后选择.info。

像这样：

$(this).parents('div.col-md-3.text-center').find('.info').animate({opacity:'0'});

【讨论】：