So I have this simple HTML

<div class="song">
    <img src="">
</div>

And this simple jQuery

$(".song").on( "mouseenter", function() {
    $(this).css( "background-color", "red" );
    alert('bla');
});

And the event does not fire.

Although

$(".naujienuKategorija").on( "mouseenter", function() {
    $(this).css( "background-color", "red" );
});

Works just fine on

<p class="naujienuKategorija">Apklausa</p>

Which is on the same page.

.song has the following css

.song {
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 1px solid #E0E0E0;
    overflow: hidden;
}

I am obviously missing something... obvious.

So I have this simple HTML

<div class="song">
    <img src="http://o.scdn.co/300/40e3ec60c92513f724f47ce71baad1e496627107">
</div>

And this simple jQuery

$(".song").on( "mouseenter", function() {
    $(this).css( "background-color", "red" );
    alert('bla');
});

And the event does not fire.

Although

$(".naujienuKategorija").on( "mouseenter", function() {
    $(this).css( "background-color", "red" );
});

Works just fine on

<p class="naujienuKategorija">Apklausa</p>

Which is on the same page.

.song has the following css

.song {
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 1px solid #E0E0E0;
    overflow: hidden;
}

I am obviously missing something... obvious.

• javascript
• jquery
• mouseenter

Share Improve this question Follow edited Apr 29, 2013 at 19:07 Huangism 16.4k77 gold badges5050 silver badges7575 bronze badges asked Apr 29, 2013 at 18:44 AugustAugust 53033 gold badges66 silver badges1919 bronze badges 9

• Can you setup a fiddle? – Karl-André Gagnon Commented Apr 29, 2013 at 18:46
• 5 It works fine here - jsfiddle/NY8L7 – dsgriffin Commented Apr 29, 2013 at 18:46
• is your .song code in the same block/location as the .nauj... code? i ask because it's possible the code is generated before the dom is ready (which obviously isn't the case for .nauj...) – Smern Commented Apr 29, 2013 at 18:47
• 1 works here too - also made a jsfiddle jsfiddle/5vKKc – SirDerpington Commented Apr 29, 2013 at 18:47
• 4 Did you bind the mouseenter event inside of $(document).ready? – Ian Commented Apr 29, 2013 at 18:47

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 2

In order for an event to be bound to an element, the element has to be ready and found. A general way to do this is to put your event bindings inside of $(document).ready because it ensures original elements on the page can be accessed. So use this:

$(document).ready(function () {
    $(".song").on( "mouseenter", function() {
        $(this).css( "background-color", "red" );
        alert('bla');
    });
});

Another option is to put your event binding on the page at any time after the target elements, either immediately or right before the </body>. For example:

<div class="song"></div>
<div class="song></div>

<script type="text/javascript">
    $(".song").on("mouseenter", function () {

    });
</script>

It might've been working with the .naujienuKategorija elements because you were using the second method above, but weren't with the .song elements.