0

我有动态生成的 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_content").on({
    mouseenter: function () {
        alert("enter");
    },
    mouseleave: function () {
        alert("leave");
    }
});

知道我做错了什么吗？

4

4 回答 4

3

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

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

在这里，body您可以使用.widget_content.

于 2012-11-07T09:22:26.710 回答
1

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

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

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

代码

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

});​
于 2012-11-07T09:24:20.463 回答
0

用这个：

$(".widget_content").hover(
function () {
alert("enter");
},
function () {
alert("leave");
}
);
于 2012-11-07T09:24:49.577 回答
0

将文本添加到您的 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-07T09:33:37.910 回答