mouseover 설정 JQuery를 사용하여 div의 속성

Question

div에 대한 속성을 설정하고 싶습니다. 나는 이것을했다 :

$('#row-img_1').onmouseover = function(){ alert('foo'); }; 
$('#row-img_2').onmouseout = function(){ alert('foo2'); }; 

그러나 위의 방법은 효과가 없다. 마우스가 끝났을 때나 밖으로 나가면 경고하지 않는다.

나는 또한 $('#row-img_1').attr();을 시도했으며이 역시 작동하지 못했습니다.

더 효과적인 이벤트 처리 시스템을 사용해야한다는 것을 알고 있지만 div는 동적으로 생성됩니다. 게다가 작은 프로젝트입니다. ;)

모든 도움을 주셔서 감사합니다.

Answer 1

$('#row-img_1').bind('mouseenter', function(event){ 
    // event handler for mouseenter 
}); 

$('#row-img_1').bind('mouseleave', function(event){ 
    // event handler for mouseleave 
}); 

또는 사용 jQuerys 호버 이벤트 당신은 요소에 이벤트 기능을 결합해야합니다. 이벤트 속성을 설정해도 효과는 없습니다. 페이지가로드 될 때만 해석되기 때문입니다. 따라서 다른 방식으로 이벤트 콜백을 연결해야합니다 mouseenter 및 mouseleave : jQuery를에

$('#row-img_1').mouseover(function() { 
    alert('foo'); 
}); 
$('#row-img_2').mouseout(function() { 
    alert('foo2'); 
}); 

을 두 더 많은 이벤트가 있습니다. 이것들은 비슷하지만 mouseenter은 자식 요소에서 주 요소로 마우스를 이동할 때 실행되지 않습니다. 반면 mouseover은 이벤트를 다시 발생시킵니다. 같은 논리가 mouseleave 대 mouseout에 적용됩니다.

그러나 jquery는 .hover 메서드와 같은 사용법에 대한 바로 가기를 제공합니다.

Answer 2

이벤트는 다음과 같이 속성으로 전달 함수로 등록 :

또한

$('#row-img_1').mouseover(function(){ alert('foo'); }); 
$('#row-img_2').mouseout(function(){ alert('foo2'); }); 

에서, onmouseover에서 누락 된 on을 확인합니다. effectivly 같은

$('#row-img_1').hover(function(){ 
    // event handler for mouseenter 
}, function(){ 
    // event handler for mouseleave 

}); 

Answer 3

$('#row-img_1').mouseover(function() { 
    alert('foo'); 
}); 

Answer 4

을 수행