jQuery懸停效果不起作用

Question

我有動態生成的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_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沒有任何反應。

$(".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任何靜態父元素代替body 。

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

將文本添加到div標簽中，否則將鼠標懸停在頂部，並且容器div標簽也應正確包含close標簽（即</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>