0

jQuery を使用して e コマース Web サイトを構築していて、ちょっとした問題に遭遇しました。mouseenter イベントで追加されたすべての製品をリストする「マイカート」ボタンがあります。問題は、特定の製品を削除するボタンがあることです。そのボタンをクリックすると、最初の ajax リクエストを何度も呼び出すことに戻り、製品を削除できなくなります。イベントのどこかに問題があることは知っていますが、それを理解できません。コードは次のとおりです。

// My cart
$('div#cartButton').mouseenter(function() {
    //var remProduct, notLogedIn, pCartError;
    var language = $.cookie('lang');
    $.ajax({
        type: "GET",
        url: "./locales/lang_js_"+language+".xml",
        dataType: "xml",
        cache:false,
        success: function(xml) {
            var remProduct = $(xml).find('remProduct').text();
            var notLogedIn = $(xml).find('notLogedIn').text();
            var cartEmpty = $(xml).find('cartEmpty').text();
            var pCartError = $(xml).find('error').text();

            // Ajax
            $.ajax({
                type: "GET",
                url: "./ajax/loadcart.php",
                cache:false,
                beforeSend: function() {$('div#cartDPStatus').empty().html('<img src="./images/al_2.gif" />')},
                success: function(response) {
                    var data = $.parseJSON(response);
                    switch(data['status']) {
                        case 'OK':
                            $('div#cartDPStatus').empty();
                            $('div#cartViewDropDown').html(data['products']);
                            // Remove from cart
                            $('span.cqpRemove').click(function() {
                                $(this).parent('div.cartQProduct').hide(200, function() {
                                    $(this).parent('div.cartQProduct').remove();
                                    if($('div.cartQProduct').length <= 0) $('div.cartViewDropDown').empty().html('<div id="cartDPStatus">'+cartEmpty+'</div>');

                                    console.log($('div.cartQProduct').length);
                                });
                            });
                        break;
                        case 'EMPTY':
                            $('div#cartDPStatus').empty().html(cartEmpty);
                        break;
                        case 'BAD':
                            $('div#cartDPStatus').empty().html('<img src="./images/icon_error.png" style="height:24px !important"/>&nbsp;'+pCartError);
                        break;
                        case 'NOTLOGEDIN':
                            $('div#cartDPStatus').empty().html('<img src="./images/icon_error.png" style="height:24px !important"/>&nbsp;'+notLogedIn);
                        break;
                    }
                },
                error: function() {
                    $('div#cartDPStatus').empty().html(pCartError);
                }       
            });
        }
    });
    $('div#cartViewDropDown').slideDown(300);
});

最初の ajax リクエストは、言語 xml ファイルを読み取るためのものです。2 番目のリクエストが完了すると、製品が読み込まれ、クリック イベントによってその要素が削除されます。

問題がどこにあるかを理解していただければ幸いです。そのボタンをクリックすると、マウスがその div 要素の上にある間、何度も何度もロードに戻ります。

どんな助けでも大歓迎です。ありがとう。

編集： 私のhtmlは次のようになります

<div id="cartButton">
   <div id="cartViewDropDown">
       <div id="cartDPStatus">&nbsp;</div>
   </div>
</div>
4

1 に答える 1

0 
$('p.remove').click(function() {
     $(this).hide(); 
});

このイベントは、DOM 要素を削除するたびにトリガーされます。理由はわかりませんが、使用すれば思いどおりhide()に動作するはずです。

このフィドルを参照してください。

于 2013-03-28T12:25:11.930 に答える