jQueryhover效果不起作用

我有动态生成的div标签，看起来像这样：

这些div选项卡将根据用户选择生成，所以我不知道他们一次会在屏幕上有多少，我只知道他们可以在屏幕上拥有许多相同的小部件和/或一旦打开差异屏幕一下子。

当我将鼠标hover在任何这些小部件上时，我试图获得hover效果。 我尝试了以下操作，但是当将.widgethover在.widget时没有任何反应。

 $(".widget_content").on({ mouseenter: function () { alert("enter"); }, mouseleave: function () { alert("leave"); } }); 

知道我做错了什么吗？

Answer 1

如果动态添加元素，请使用委托事件方法 ：

 $("body").on({ mouseenter: function() { alert("enter"); }, mouseleave: function() { alert("leave"); } }, ".widget_content"); 

这里可以使用.widget_content任何静态父元素而.widget_content 。

Answer 2

工作演示 http://jsfiddle.net/Ex3M6/

试试$(document).ready(function() {

希望它适合你的事业:)

码

 $(document).ready(function() { $(".widget_content").on({ mouseenter: function() { alert("enter"); }, mouseleave: function() { alert("leave"); } }); });​ 

Answer 3

用这个：

 $(".widget_content").hover( function () { alert("enter"); }, function () { alert("leave"); } ); 

Answer 4

除了鼠标hover之外，还要在div标签上添加文本，并且容器div标签也应正确关闭标签（即 ）。

 
 
dfsdfsdf
 
sdfsdf
 
sdfsdf
 
sdfsdfsdf
 
 
 
sdfsdf
 
ggggg
 
aaaaa
 
ssss
 
 
 
sssss
 
fgggg
 
fdff
 
dfgdfgdfg
  

你的jquery代码在这个改变之后工作，