0

ここで何が間違っているのかわかりません.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の限られた知識では使用できませんが、コードが機能しない理由を確認できません。エラーを指摘できますか?

4

4 に答える 4

0

イベントを設定したときにすべての DOM 要素がダウンロードされるわけではないため、最初のコードは機能しません。$(".topCart")そして、結果が空になる原因となります。これはエラーを発生させません。構文は正しいです。問題は、jQuery が html で動作することです。これは完了していません。

$(document).ready(...)

また 

$(function() {
 // Handler for .ready() called.
});
于 2012-10-31T12:18:42.970 に答える
0 
$(document).ready(function() { 
    $(".topCart").mouseover(function() {
        ...
    }
});

イベントが発生する前に document.ready を使用する必要があります。ドキュメントのすべての DOM 要素がロードされた後、確実にロードされます。それ以外の場合は、DOM にロードされていないイベントを探しています。

于 2012-10-31T12:20:10.823 に答える
0

コードを入力するときに、いくつかの基本的な構造と清潔さ (信心深さの隣) を試してみてください。そうすれば、エラーを見つけるのがはるかに簡単になります。

$(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');
        }
    });
});​
于 2012-10-31T12:21:06.287 に答える
0

がなければ$(document).ready()、最初のものは実際には にバインドされていません$('.topCart')。

2 番目の例では、 document ready を使用して、関数を hover イベントにバインドする瞬間または時間を示します。

于 2012-10-31T12:21:31.197 に答える