Question

HTML：

<div class="channellist"></div>

使用Ajax我在页面加载并附加在channellist容器中时动态获取通道。附加我的html后就像这样。

<div class="channellist" id="channellist">
   <div class="c01" id="c1"></div>
   <div class="c01" id="c2"></div>
   <div class="c01" id="c3"></div>
</div>

我试过这个

$('.channellist').hover(function() {
 alert(this.id);
});

我收到了警告信息。

当我在c01课上尝试悬停时，我没有收到警报。

$('.c01').hover(function() {
 alert(this.id);
});

我不知道哪里出错了。任何人都可以帮忙解决这个问题。

Answer 1

您需要使用event delegation，试试这个

＆＃13;

$('.channellist').on('mouseenter mouseleave', '.c01', function() {
	console.log(this.id);
});

// only for example 
setTimeout(function () {
  $('.channellist').html(
    '<div class="c01" id="c1">1</div>' +
    '<div class="c01" id="c2">2</div>' + 
    '<div class="c01" id="c3">3</div>'
  );
}, 1000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="channellist" id="channellist"></div>

＆＃13;

$.on

名称＆＃34;悬停＆＃34;用作字符串＆＃34; mouseenter的简写鼠标离开＆＃34 ;.它为这两个事件附加了一个事件处理程序，并且处理程序必须检查event.type以确定是否该事件是mouseenter或mouseleave。不要混淆＆＃34;悬停＆＃34; 伪事件名称，带有.hover（）方法，接受一个或两个功能

Answer 2

使用Ajax我正在动态获取频道

可以使用以下事件委托进行排序：

$('#channellist').on('mouseenter', '.c01', function() {
     alert(this.id);
});

事件委托的语法类似于：

$(staticParent).on(event, selector, callback);

其中$(staticParent)应该是DOM准备就绪时可用的元素，在您的情况下，它似乎是#channellist元素。

Answer 3

<div class="channellist" id="channellist">
   <div class="c01" id="c1"></div>
   <div class="c01" id="c2"></div>
   <div class="c01" id="c3"></div>
</div>

你的积木是空的，它们的高度是0，你不能在tham上盘旋。尝试更多高度，或在里面打印一些文字，

像：

<div class="channellist" id="channellist">
   <div class="c01" id="c1">1</div>
   <div class="c01" id="c2">2</div>
   <div class="c01" id="c3">3</div>
</div>

Answer 4

由于代码动态附加到div，因此文档的onload将不会出现事件，因此请使用.live事件或通过委派事件来使用.on。然后事件将执行。供您参考检查此链接： https://jsfiddle.net/HimeshS/ocxoy6c2/

https://jsfiddle.net/HimeshS/ocxoy6c2/

对于.live：

$(.c01).live("mouseenter", function(){
      alert(this.id);
});

悬停在一个班级而不是另一个班级正常工作

4 个答案: