Question

我不确定我在这里做错了什么。我有一个div，如果用户将鼠标悬停在该div部分并希望关闭鼠标输出，我想打开一个弹出窗口。这是我的代码

<div class="topCart">
  some data
</div>

这是我的JQuery代码

$(".topCart").mouseover(function() {
    $.get('${rolloverPopupUrl}?bustcache=' + new Date().getTime(),
     function(result) {
        $('#viewCart').html(result);
        refreshMiniCart();
        });
    $('#viewCart').slideDown('slow');
    }).mouseout(function() {
     $('#viewCart').slideUp('fast');
   });

上面的代码不起作用，也没有给出任何Ajax调用来获取新数据，而如果我使用下面的代码

$(document).ready(function(){
   $(".topCart").hover( function () {
    $('#viewCart').html("");
    $.get('${rolloverPopupUrl}?bustcache='+new Date().getTime(), function(result){
    $('#viewCart').html(result);
     refreshMiniCart();
    });
     if($('#viewCart').is(':hidden')){
        $('#viewCart').slideDown('slow'); }
        },
        function () {
            $('#viewCart').slideUp('fast');
        });
});

这段代码正在运行并且正在获取数据，因此我看不到使用document.ready 凭借我对Jquery的有限知识，我试过但却无法看到不工作代码的原因任何人都可以指出我的错误吗？

Answer 1

第一个代码不起作用，因为在设置事件时并非所有DOM元素都被下载。并且它导致$(".topCart")的结果为空。这不会解决任何错误，语法是正确的，问题是jQuery与html一起工作，没有完成。

$(document).ready(...)

或

$(function() {
 // Handler for .ready() called.
});

Answer 2

$(document).ready(function() { 
    $(".topCart").mouseover(function() {
        ...
    }
});

你需要在事件发生之前使用document.ready，在文档中加载了你可以确定的所有DOM元素之后，否则你正在寻找一个没有加入DOM的事件

Answer 3

在输入代码时尝试使用一些基本的结构和清洁度（这与敬虔相邻），并且发现错误会更容易：

$(function() {
    $(".topCart").on({
        mouseenter: function() {
            var elem = $('#viewCart');
            elem.empty();        
            $.get('${rolloverPopupUrl}?bustcache=' + new Date().getTime(), function(result) {
                elem.html(result);
                refreshMiniCart();
            });
            if (!elem.is(':visible')) elem.slideDown('slow');
        },
        mouseleave: function() {
            $('#viewCart').slideUp('fast');
        }
    });
});

Answer 4

没有$(document).ready()，第一个实际上并未绑定到$('.topCart')。

第二个例子，使用文档就绪，给出了将函数绑定到悬停事件的时刻或时间。

鼠标悬停时PopUp没有打开

4 个答案: