0

我正在尝试使用.on()，因为.live()已弃用。然而我无法.on()上班。

我得到了这个 html 部分：

...
<div class="tile" data-position="0,0" style="top: 539.5px; left: 380px;">
    <div class="content">
        <div class="image"><img src="bla.png" alt="" /></div>
        <div class="title">title1</div>
    </div>
</div>

<div class="tile" data-position="0,1" style="top: 539.5px; left: 380px;">
    <div class="content">
        <div class="image"><img src="bla.png" alt="" /></div>
        <div class="title">title2</div>
    </div>
</div>

<div class="tile" data-position="0,2" style="top: 539.5px; left: 380px;">
    <div class="content">
        <div class="image"><img src="bla.png" alt="" /></div>
        <div class="title">title3</div>
    </div>
</div>
...

和这个jQuery：

$('.tile').on({
    mouseenter: function()
    {
        alert("enter");
        $(this).find('.content .image').animate({
            opacity: 0.5
        }, 100);
    },
    mouseleave: function()
    {
        alert("leave");
    }
});

无论我从 Jquery 的文档中使用什么语法，它都不起作用。有谁知道这里出了什么问题？这种语法应该可以工作，它与 jQuery 的示例非常相似。

4

1 回答 1

1

将它们放在<script>底部的标签中<body>。这将确保您附加这些处理程序的元素确实存在。

<script>
$('.tile').on({
    mouseenter: function()
    {
        alert("enter");
        $(this).find('.content .image').animate({
            opacity: 0.5
        }, 100);
    },
    mouseleave: function()
    {
        alert("leave");
    }
});
</script>
</body>

或者您可以使用 DOMready处理程序，它将在 DOM 完全加载并且所有元素都可用后执行这些事件。

$(function() {
    $('.tile').on({
        mouseenter: function()
        {
            alert("enter");
            $(this).find('.content .image').animate({
                opacity: 0.5
            }, 100);
        },
        mouseleave: function()
        {
            alert("leave");
        }
    });
});

或者让无所不在的document对象将事件委托给.tiles：

$(document).on({
    mouseenter: function()
    {
        alert("enter");
        $(this).find('.content .image').animate({
            opacity: 0.5
        }, 100);
    },
    mouseleave: function()
    {
        alert("leave");
    }
},'.tile');
于 2013-06-16T12:45:50.337 回答