JQuery MouseEnter() не стреляя

Question

Так что у меня этот простой HTML

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

И этот простой JQuery

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

И это событие не срабатывает.

Хотя

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

прекрасно работает на

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

, который находится на той же странице.

.song имеет следующий CSS

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

Я, очевидно, что-то отсутствует ... очевидно.

Answer 1

Для того, чтобы событие связывалось с элементом, элемент должен быть готов и найден. Общий способ сделать это - разместить привязки событий внутри $(document).ready, поскольку он обеспечивает доступ к исходным элементам на странице. Так что используйте это:

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

Другой вариант поставить событие связывания на странице в любое время после целевых элементов, либо сразу, либо непосредственно перед </body>. Например:

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

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

    }); 
</script> 

Возможно, я работал с .naujienuKategorija элементами, потому что вы были с помощью второго метода выше, но не с .song элементами.