jQuery悬停效果不起作用 [英] jQuery hover effect not working
问题描述
我有动态生成的div标签,看起来像这样:
I have dynamically generated div tags which looks something like this:
<div class="widget widget_1">
<div class="widget_header widget_header_1"></div>
<div class="widget_sub_header widget_sub_header_1"></div>
<div class="widget_content widget_content_1"></div>
<div class="widget_footer widget_footer_1"></div>
<div>
<div class="widget widget_1">
<div class="widget_header widget_header_1"></div>
<div class="widget_sub_header widget_sub_header_1"></div>
<div class="widget_content widget_content_1"></div>
<div class="widget_footer widget_footer_1"></div>
<div>
<div class="widget widget_6">
<div class="widget_header widget_header_6"></div>
<div class="widget_sub_header widget_sub_header_6"></div>
<div class="widget_content widget_content_6"></div>
<div class="widget_footer widget_footer_6"></div>
<div>
这些div标签将根据用户选择生成,因此我不知道它们一次在屏幕上有多少,我只知道它们可以在屏幕上有许多相同的小部件和/或一次在屏幕上显示差异.
These div tabs will be generated based on user selection, so I can't know how many they will have on screen at once, all I will know is that they can have many of the same widgets on the screen and/or difference once on the screen at once.
当我将鼠标悬停在任何这些小部件上时,我试图获得一种悬停效果.我尝试了以下方法,但是将鼠标悬停在.widget
上时没有任何反应.
I am trying to get a hover effect when hovering over any of these widgets. I tried the follow, but nothing happens when hovering over .widget
.
$(".widget_content").on({
mouseenter: function () {
alert("enter");
},
mouseleave: function () {
alert("leave");
}
});
知道我在做什么错吗?
推荐答案
如果元素是动态添加的,请使用已授权事件方法:
If the elements are dynamically added, use delegated events approach:
$("body").on({
mouseenter: function() {
alert("enter");
},
mouseleave: function() {
alert("leave");
}
}, ".widget_content");
在这里可以使用.widget_content
的任何静态父元素来代替body
.
Here instead of body
you may use any static parent element of .widget_content
.
这篇关于jQuery悬停效果不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!