Jquery onmouseover가 작동하지 않습니다.

Question

.notif 클래스의 DIV 중 하나 위에 마우스를 움직일 때 색상과 스타일을 완전히 제거 할 수 있지만 코드에서 작동하지 않습니다. alert 또는 console.log 메시지
같은 클래스의 div가 여러 개 있습니다. 마우스를 놓은 채로 배경을 제거해야합니다. 내가 사용자가 멀리 다시 마우스를 이동하면 다시을 색상을 변경하고자하는 아니에요으로

나는 toggle 또는 hover-을 원하지 않는 . 배경색은 흰색으로 남겨 두어야합니다.

배경을 다시 흰색으로 설정하는 데는 .addClass() 또는 .attr()을 사용하는 JS 피들에서 작동하지만 스크립트는 다른 곳에서 작동하지 않습니다. 다른 JS/Jquery 스크립트가 작동하므로 URL을 포함하는 것을 잊어 버린 것이 아닙니다.

$(document).ready(function() { 
 
    $(".notif").mouseover(function() { 
 
    //console.log('mouseover detected!!'); 
 
    //alert('Mouse!'); 
 
    $(this).addClass("notif_read"); 
 
    //$(this).attr("style","background-color:white"); 
 
    }); 
 
});

.notif { 
 
    background: aliceblue; 
 
    border-left: darkblue; 
 
    border-left-style: solid; 
 
} 
 
.notif_read { 
 
    background: white; 
 
    border-left: none; 
 
    border-left-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="notifications container" style="width: 400px; max-height: 300px; overflow: auto;"> 
 
    <h6 style="margin-left:40px;"><div class="notification-heading">Unread Notifications</div></h6> 
 
    <hr class="notification-divider"> 
 
    <div class="notif row"> 
 
    <a href="?function=show&amp;id=47930"> 
 
     <div class="col-md-2 text-left"> 
 
     <img src="https://wb-dev.workbooks.com/resources/3AjMwETM/wb_icon_small.png" height="70px" width="70px"> 
 
     <input class="case_ref" type="hidden" value="CASE-32109"># 
 
     </div> 
 
     <div class="col-md-2"></div> 
 
     <div class="col-md-8 text-center text-muted">Workbooks Support updated CASE-32109</div> 
 
    </a> 
 
    </div> 
 
    <div class="notif row"> 
 
    <a href="?function=show&amp;id=47930"> 
 
     <div class="col-md-2 text-left"> 
 
     <img src="https://wb-dev.workbooks.com/resources/3AjMwETM/wb_icon_small.png" height="70px" width="70px"> 
 
     <input class="case_ref" type="hidden" value="CASE-32109"># 
 
     </div> 
 
     <div class="col-md-2"></div> 
 
     <div class="col-md-8 text-center text-muted">Workbooks Support updated CASE-32109</div> 
 
    </a> 
 
    </div> 
 
    </hr> 
 
</div>

jsfiddle은 :http://jsfiddle.net/ha4pwd4o/3/

Answer 1

나는 마지막으로이 쿼리를 해결했습니다! 위의 예제는 의도 한대로 작동하지만. 내 환경 내에서 코드는 드롭 다운 메뉴 내에 있습니다. 그것은 AJAX에 의해 동적으로 생성됩니다. (매 10 분마다 새로운 알림을 위해 데이터베이스를 확인하고, HTML을 생성하여 기존 목록에 추가합니다.) DOM은 새로운 DIV에 대해 알지 못하기 때문에 변경할 수 없습니다. onmouseover.

$("#notification_menu").on("mouseover", ".notif", function() { 
     console.log('mouseover detected!!'); 
     $(this).addClass('notif_read'); 
    });