Question

我正在尝试使用.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的例子非常相似。

Answer 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>

或者您可以使用DOM ready处理程序，它将在完全加载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');

jQuery .on（）不使用mouseenter和mouseleave

1 个答案: