jQuery Hover 在 Wordpress 网站上不起作用

Question

我今天早些时候发布了 this question 关于切换 DIV 可见性的帖子，并收到了正确的答案，正如您在 Fiddle 中看到的那样，它非常有效。

我基本上是在尝试使用 jQuery 悬停来切换重复类的 div 可见性。

问题是，我无法让它在我的 Wordpress 网站上运行。

即使所有 div 和 CSS 都存在且正确，jQuery 也根本没有触发。控制台中根本没有报告错误。它只是没有加载这个函数。

我一定是打错了！

仅供参考 - WP 网站正在加载 jQuery 1.11.0 和 jQuery.migrate 1.2.1。

jQuery 在网站页脚中的确切位置（由于兼容模式而被包装）：

 <script type="text/javascript">

 (function($) {
   $(".showlist-wrap").hover(function() {
   $(".showlist-artwork,.showlist-info",this).toggle().off("hover");
 });
 })( jQuery );

 </script>

CSS 看起来像这样：

 .showlist-wrap {
   position:relative;
   width:293px;
   height:195px;
   background:black;
   margin-right:13px;
   margin-bottom:13px;
   float:left;
   border-radius:10px;
   overflow:hidden;
 }

 .showlist-artwork {
   position:absolute;
   top:0;
   width:293px;
   height:195px;
   display:block;
 }

 .showlist-info {
   position:absolute;
   top:0;
   width:293px;
   height:195px;
   display:none;
 }

HTML 像这样触发：

 <div class="showlist-wrap">
 <div class="showlist-artwork"><img src="/image.jpg" /></div>
 <div class="showlist-info">Some Text Goes Here</div>
 </div>

就像我上面提到的，实际的 CSS 完美地显示在页面上，HTML 明智的一切都在它应该在的地方。只是 jQuery 不工作，所以代码一定是不正确的。

谁能告诉我哪里出错了？

Answer 1

可能是因为你没有等到DOM ready才绑定事件，如果你没有使用.on()绑定事件就不能使用.off()：

$(function(jQuery) {
    (function($) {
        $(".showlist-wrap").on('hover', function() {
            $(".showlist-artwork,.showlist-info",this).toggle().off("hover");
        });
    })( jQuery );
});

或者您绑定此事件处理程序的内容可能在DOM ready 上不可用：

(function($) {
    $(document).on('hover', ".showlist-wrap", function() {
        $(".showlist-artwork,.showlist-info",this).toggle().off("hover");
    });
})( jQuery );

Answer 2

wordpress 会自动加载 jquery，因此如果您在主题中手动包含 jquery，则 jquery 会加载两次，这可能会产生冲突。

请阅读this关于正确包含js和css的文章