jQuery hover事件偶尔失效求助：按钮绑定hover无响应

嘿，我来帮你梳理下这个问题的原因和解决方案～

首先，最核心的问题出在选择器写错了！你写的$('nav-left')是在查找标签名为<nav-left>的元素，但你的按钮是通过id="nav-left"定义的，正确的id选择器必须加上#前缀，也就是$('#nav-left')。这就是为什么日常使用中大部分时候失效——因为根本找不到目标元素，事件绑定不上去；而控制台测试偶尔有效，大概率是你测试时不小心补了#，或者巧合下页面里有匹配的元素（这种情况很少见）。

除了选择器的问题，还有两个常见原因会导致hover事件偶尔失效，也一起帮你排查下：

1. 确保DOM加载完成后再绑定事件 #

你的JS文件引用在header里，这时候页面的DOM元素可能还没完全渲染出来，按钮元素还不存在，导致事件绑定失败。解决方法是把事件绑定代码放在$(document).ready()回调里，确保DOM就绪后再执行：

$(document).ready(function() {
  $('#nav-left').hover(function() {
    alert('something');
  });
});

或者直接把JS文件的引用放在<body>标签的末尾，这样页面元素加载完再执行JS，也能避免这个问题。

2. 处理动态生成的元素 #

如果这个按钮是通过JavaScript动态添加到页面中的（比如后来才插入到#carosel里），普通的hover绑定会失效，因为绑定事件的时候元素还不存在。这时候需要用事件委托，把事件绑定到父元素或者document上，监听子元素的事件：

// hover是mouseenter和mouseleave的组合，所以要监听这两个事件
$(document).on('mouseenter mouseleave', '#nav-left', function() {
  alert('something');
});

这样不管按钮什么时候被添加到页面，事件都能触发。

先把选择器的问题修正，再结合上面的两种情况排查，应该就能解决hover事件偶尔失效的问题啦～

内容的提问来源于stack exchange，提问作者shihan