jQuery 호버링 이벤트가 UL에서 발생하지 않습니까?

나는 비슷한 제목의 많은 질문을 훑어 보았고, 내 인생에서 무슨 일이 일어나고 있는지 파악할 수 없다. 나는 KnockoutJS + jQuery를 사용하는 시스템을 가지고있다.이 시스템은 목록을 채우고 다른 기능의지도에서 강조 표시 할 목록에 클래스를 추가한다. 충분히 간단한jQuery 호버링 이벤트가 UL에서 발생하지 않습니까?

<ul data-bind="foreach: markers" class="locationListMain"> 
    <ul class="locationList"> 
     <h3 class="resultTITLE"> 
      <span data-bind="text: title"></span> 
     </h3> 
     <p class="resultLATLONG"> 
      LAT 
      <span data-bind="text: lat"></span> 
      , LONG 
      <span data-bind="text: lng"></span> 
     </p> 
    </ul> 
</ul>

여기 내 HTML입니다.

$('.locationList').hover(function(){ 
    console.log('hovering'); 
    $(this).addClass('active'); 
}, function() { 
    console.log('not hovering!'); 
    $(this).addClass('active'); 
});

을하지만 난 화재로 아무것도 얻을 수 없다 : 지금은 jQuery를 통해과 같이 .locationList에 호버 이벤트를 호출하는 것을 시도하고있다. 이상한 것은, .locationList 요소를 제거하고 그 클래스를 최상위 레벨 <ul>에 추가하면 문제없이 작동합니다. 그것은 CSS 문제가 있는지 궁금하네요,하지만 그 중 하나도 손톱 수 없습니다. 기쁨없이 최고의 z 색인으로 이동 시켰습니다. 생각? 도움이나 통찰력을 크게 고맙게 여길 것입니다. 감사!

출처

2017-09-04 IkeDoud

아마도 런타임시 DOM에서 사용할 수 있기 전에 호버 이벤트 리스너를'.locationList'에 바인딩한다는 의미입니다. JS가 실행되고 요소가 아직 사용 가능하지 않으면 선택기에서 반환 된 빈 세트로 호버 이벤트를 바인딩합니다. 부모 노드에서 이벤트 바인딩 (예 :'$ someParent.on ('mouseenter', '.locationList', function() {)}을 사용하여 요소가 렌더링 될 때이 바인딩을 실행해야합니다. 런타임에 표시됩니다. – Terry

이 함수를 $ (document) .ready 아래로 이동하면 트릭을 만들었습니다. 엄청 고마워! – IkeDoud

테리의 의견에 감사드립니다. hover 이벤트 리스너가 DOM에서 사용 가능하기 전에 요소에 바인딩하려고했습니다. 호버 기능을 아래로 이동

$(document).ready(function(){})

트릭을했습니다.

출처

2017-09-04 21:03:29 IkeDoud

jQuery 호버링 이벤트가 UL에서 발생하지 않습니까?

답변

관련 문제