Jquery onmouseover 不工作

Question

当我将鼠标移到 class 为 .notif 的任何一个 DIV 上时，我希望完全删除 background 颜色和 border-left 样式但它在我的代码中不起作用 - 我没有看到 alert 或 console.log 消息。
我将有几个具有相同 class 的 div - 只有悬停在上面的 div 应该删除背景。

我不想到toggle或hover，因为我不想把颜色改回来 当用户再次将鼠标移开时。背景颜色应保留为白色。

它在 JS fiddle 中有效，使用 .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');
    });

Jquery onmouseover 不工作

Jquery onmouseover not working

jquery

onmouseover

attr