Drop those in a <script>
tag at the bottom of <body>
. This will ensure that the elements you're attaching these handlers do actually exist.
<script>
$('.tile').on({
mouseenter: function()
{
alert("enter");
$(this).find('.content .image').animate({
opacity: 0.5
}, 100);
},
mouseleave: function()
{
alert("leave");
}
});
</script>
</body>
Or you could use DOM ready
handler which will execute these events after DOM is loaded fully and all elements are available.
$(function() {
$('.tile').on({
mouseenter: function()
{
alert("enter");
$(this).find('.content .image').animate({
opacity: 0.5
}, 100);
},
mouseleave: function()
{
alert("leave");
}
});
});
Or let the omnipresent document
object delegate the event to .tiles
:
$(document).on({
mouseenter: function()
{
alert("enter");
$(this).find('.content .image').animate({
opacity: 0.5
}, 100);
},
mouseleave: function()
{
alert("leave");
}
},'.tile');