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的懸停不工作

回答

相關問題