Question

我正在使用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文件，一旦完成第二次请求加载产品，然后click事件应该删除该元素。

我希望您了解问题所在。一旦我点击该按钮，当鼠标悬停在div元素上时，它会一次又一次地重新加载。

感谢任何帮助。感谢。

修改我的HTML看起来像这样

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

Answer 1

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

每次删除DOM元素时都会触发该事件。我不知道为什么，但是如果你使用hide()它应该像你想要的那样工作。

请参阅此fiddle。

事件中的事件，继续重新加载

1 个答案: