JQuery onmouseover не работает

Question

Когда я перемещаю мышку над любым из DIV с классом .notif, я хочу, чтобы background и стили border-left были удалены полностью, но они не работают в моем коде - я не вижу ни одного alert или сообщение console.log.
У меня будет несколько div с одним и тем же классом - только тот, который завис, должен удалить фон.

Я не хочу к toggle или hover, так как я не хотите изменить цвет обратно, когда пользователь перемещает мышь прочь снова. Цвет фона должен быть белым.

Это работает в скрипте JS, используя .addClass() или .attr(), чтобы вернуть фон обратно на белый, но сценарий не работает в другом месте. У меня есть другие сценарии 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, поэтому не может их изменить при наведении курсора на.

Окончательный код, который я надеюсь, что кто-то помогает:

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