의 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> 전에 즉시 또는 오른쪽 후 언제든지 에서 대상 요소를 페이지에 바인딩 이벤트를 넣어하는 것입니다. 위의 두 번째 방법을 사용했다,하지만 .song 요소하지 않았기 때문에 그것은 .naujienuKategorija 요소와 일한지 수

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

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

    }); 
</script> 

예를 들면 다음과 같습니다.