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>

またはready、DOM が完全にロードされ、すべての要素が利用可能になった後にこれらのイベントを実行する 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 に答える