0

我正在使用 jQuery 构建一个电子商务网站，但遇到了一个小问题。我有一个“我的购物车”按钮，它应该列出在 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 文件，一旦完成，第二个请求会加载产品，然后单击事件应删除该元素。

我希望你明白问题出在哪里。一旦我单击该按钮，当我的鼠标悬停在该 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 回答