Jquery onmouseover ne fonctionne pas

Question

Lorsque je déplace ma souris sur l'un des DIVs avec une classe de .notif, je veux les styles background couleur et border-left à supprimer complètement mais cela ne fonctionne pas dans mon code - je ne vois pas non plus le alert ou le message console.log.
Je vais avoir plusieurs divs avec la même classe - seul celui qui est survolé devrait avoir l'arrière-plan supprimé.

Je ne veux -toggle ou hover, comme je suis ne cherche pas à changer la couleur en arrière lorsque l'utilisateur déplace la souris à nouveau. La couleur d'arrière-plan doit être laissée blanche.

Cela fonctionne dans JS Fiddle en utilisant .addClass() ou .attr() pour remettre l'arrière-plan en blanc, mais le script ne fonctionne pas ailleurs. J'ai d'autres scripts JS/Jquery en place qui fonctionnent donc ce n'est pas que j'ai oublié d'inclure les 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

J'ai finalement résolu cette question! Bien que l'exemple ci-dessus fonctionne comme prévu. Dans mon environnement, le code se trouve dans un menu déroulant. Il est créé dynamiquement par AJAX (toutes les 10 minutes, je vérifie une base de données pour de nouvelles notifications, génère du HTML à la volée et l'ajoute à la liste existante) - Je pense que le DOM ne connait pas les nouvelles DIVs. onmouseover.

code final que j'espère aide quelqu'un:

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