javascript - jQuery 悬停事件切换类未触发

Question

我已经调试这个问题好一段时间了，我很困惑为什么它不起作用。

如您所见，我在 JSFiddle 上运行以下代码，它似乎可以正常工作:

  $(".assistance-submit-btn").hover(function() {
    $(this).children('i').toggleClass("assistance-submit-btn-mouseover");
  });

.assistance-submit-btn {
  font-size: 1.4rem;
  font-weight:300;
  padding: 10px 20px;
  background: none;
  border: 2px solid #333;
  border-radius: 10rem;
  color: #333;
  margin: 25px auto 0;
  display: block;
}

.assistance-submit-btn-mouseover {
  transform:translate(10px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="assistance-submit-btn" value="Submit">Submit&nbsp;<i class="fa fa-caret-right"></i></button>

如您所见，当 assistance-submit-btn 元素悬停时，它会向 i 元素添加一个类。

此代码是我正在开发的本地网站的直接副本，但是由于某种原因在我的本地系统上，当 assistance-submit-btn 元素悬停时，它不会执行。

到目前为止，我已经尝试向元素本身添加 CSS 悬停，只是为了查看该元素是否在另一个元素后面并且无法悬停。

在我的本地设置中，我能想到的唯一区别是 assistance-submit-btn 元素是由 AJAX 引入的。这会影响 jQuery 悬停事件吗？任何关于为什么会发生这种情况的建议将不胜感激。

谢谢

更新:忘记提及我在控制台中没有收到任何错误。

Answer 1

是的，这是因为 Ajax 动态内容。使用此代码:

$(document).on({
    mouseenter: function () {
        $(this).children('i').addClass("assistance-submit-btn-mouseover");
    },
    mouseleave: function () {
         $(this).children('i').removeClass("assistance-submit-btn-mouseover");
    }
});