jQuery的悬停不工作

我已动态生成div标签看起来像这样的效果：jQuery的悬停不工作

<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标签将基于用户选择而产生的，所以我不知道他们会多少有屏幕一次，所有我会知道的是，他们可以在屏幕上有许多相同的小工具和/或一次在屏幕上一次不同。

我想在悬停在任何这些小部件上时获得悬停效果。我尝试了以下，但在.widget上徘徊时没有任何反应。

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

任何想法我做错了什么？

来源

2012-11-07 oshirowanen

如果元素动态添加，使用delegated events approach：

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

这里，而不是body你可以使用的.widget_content任何静态父元素。

来源

2012-11-07 09:22:26 VisioN

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

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

休息希望它适合你的事业:)

代码

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

});

来源

2012-11-07 09:24:20

使用此：

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

来源

2012-11-07 09:24:49 Rusty

您div标签添加文本，否则对你有什么鼠标悬停顶部，你的容器div标签应该有密切的标签正确，以及（即。 </div>）。

<div class="widget widget_1"> 
    <div class="widget_header widget_header_1">dfsdfsdf</div> 
    <div class="widget_sub_header widget_sub_header_1">sdfsdf</div> 
    <div class="widget_content widget_content_1">sdfsdf</div> 
    <div class="widget_footer widget_footer_1">sdfsdfsdf</div> 
</div> 

<div class="widget widget_1"> 
    <div class="widget_header widget_header_1">sdfsdf</div> 
    <div class="widget_sub_header widget_sub_header_1">ggggg</div> 
    <div class="widget_content widget_content_1">aaaaa</div> 
    <div class="widget_footer widget_footer_1">ssss</div> 
</div> 

<div class="widget widget_6"> 
    <div class="widget_header widget_header_6">sssss</div> 
    <div class="widget_sub_header widget_sub_header_6">fgggg</div> 
    <div class="widget_content widget_content_6">fdff</div> 
    <div class="widget_footer widget_footer_6">dfgdfgdfg</div> 
</div>

jQuery代码工作后这种变化，

<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script> 
<script language="javascript" type="text/javascript"> 

    $(document).ready(function() { 
     $("div[class^='widget_content']").on({ 
     mouseenter: function() { 
      alert("enter"); 
     }, 
     mouseleave: function() { 
      alert("leave"); 
     } 
     }); 

});     

</script>

来源

2012-11-07 09:33:37 Swarne27

jQuery的悬停不工作

回答

相关问题