Событие внутри события, продолжает загружаться заново

Question

im создание веб-сайта электронной коммерции с использованием 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.

Любая помощь приветствуется. Спасибо.

Edit: Мой 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.