jQuery仅在调试模式下有效

Question

我有一个非常简单的jQuery代码片段。

看起来像这样：

$(document).ready(function() {                
   jQuery('.mh_img_box2').closest('.mh_img_box1').hover(function () {
       console.log("click");
       jQuery(this).find('.sp_product-note, .sp_product-note2 ').show();
       jQuery(this).addClass('hover-image');
       console.log("click");
   })

   jQuery('.mh_img_box2').closest('.mh_img_box1').mouseleave(function (){
       jQuery('.sp_product-note, .sp_product-note2').hide();
       jQuery(this).removeClass('hover-image');
   })
});

使用此代码，如果鼠标悬停在相应元素上，我只想显示一个悬停文本。

不幸的是，它只能在调试模式下工作。

您可以在此处查看该站点：

http://v4.machhoerndl-kaffee.de/sw/

谢谢你的帮助。

Answer 1

您需要在单个hover事件处理程序代码中压缩代码，如下所示：-

$(document).ready(function(){
    $('.mh_img_box1').hover(function () {
        $(this).find('.sp_product-note, .sp_product-note2 ').show();
        $(this).addClass('hover-image');
    },function(){
        $(this).find('.sp_product-note, .sp_product-note2 ').hide();
        $(this).removeClass('hover-image');
    });
});

注意：-我已经在您的网站上检查了此代码

在控制台1.添加代码来检查： - https://prnt.sc/j52qtx

2.现在我将鼠标悬停在盒子上：-https: //prnt.sc/j52r45

3.Now当我悬停开箱： - https://prnt.sc/j52rae

Answer 2

按照您的代码，我看到您正在使用AJAX调用来呈现内容，

因此，以上$(window).on("load",function () {

因此，对于您的代码，仅在呈现html内容之后（在ajax响应到来之后以及呈现html代码完成时），才需要绑定悬停事件

渲染html后调用以下函数

$('.mh_img_box1').bind({
        mouseenter: function () {
            $(this).find('.sp_product-note, .sp_product-note2').show();
            $(this).addClass('hover-image');
        },
        mouseleave:function(){
        $(this).find('.sp_product-note, .sp_product-note2').hide();
        $(this).removeClass('hover-image');
        }
    });

对于ajax呼叫模拟，请单击“ 渲染数据”按钮。

 function renderData(){ //Code which execute on ajax response var s = '<div class="mh_img_box1">' +'<div class="mh_img_box2" style="position:absolute;">' +' <picture> ' +' <img class="mh_box_emotion_img" src="http://v4.machhoerndl-kaffee.de/sw/media/image/e2/2c/c6/prod_600x600.jpg" alt="BRASILIEN Samambaia Recipe No. 2">' +' </picture> ' +' <div class="sp_product-note" style="display: none;">schokoladig, nussig</div> ' +' <div class="sp_product-note2" style="display: none;">ab 12,00 EUR</div> ' +' </div> ' +' </div> '; document.getElementById("content").innerHTML=s; //Above line render the html, now bind the hover event as below $('.mh_img_box1').bind({ mouseenter: function () { $(this).find('.sp_product-note, .sp_product-note2').show(); $(this).addClass('hover-image'); }, mouseleave:function(){ $(this).find('.sp_product-note, .sp_product-note2').hide(); $(this).removeClass('hover-image'); } }); } 

 <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <input type="button" value="Render Data" onclick="renderData();"/> <div id="content"/> </div>