Button not starting ajax call

Button not starting ajax call

Hello, My button, when clicked is not start the ajax call, I cannot work out why. This is my button: 
   
    
    
  1. <button class='btn btn-default pull-right cart-delete' onClick='event.stopPropagation();' id='$product_id'>X</button>
    2. 
   

   

    The reason I added onClick='event.stopPropagation();' is because my button is in a bootstrap dropdown toggle and I need to keep the dropdown "down" even after the click in the cart.
    

   
 And this is my jquery code: 
 
    
  
  1.  dataType: 'json',
    2. 
  
  2. <script>
    3. 
  
  3.  $(document).ready(function(){
    4. 
  
  4.  $(".cart-delete").click(function(){
    5. 
  

    6. 
  
  6.  var id = $(this).parent().attr("id");
    7. 
  
  7.  alert(id);
    8. 
  
  8.  $.ajax({
    9. 
  
  9.  type: "POST",
    10. 
  
  10.  data: id,
    11. 
  
  11.  url: "resources/templates/frontend/delete-cart.php",
    12. 
  
  12.  success: function(data)
    13. 
  
  13.  {
    14. 
  
  14.  $.get('resources/templates/frontend/update-cart.php')
    15. 
  
  15.  }
    16. 
  
  16.  });
    17. 
  
  17.  event.preventDefault();
    18. 
  
  18.  });
    19. 
  
  19.  });
    20. 
  

    21. 
  
  21. </script>
    22. 
  

    23. 
  

    24. 
 

 

  

 

 

  

 

 
    
  
  1. From what I have found online, adding this "event.preventDefault();" should prevent 
    2. 
  
  2. the button to reload the page but when I click it I can see a very short browser reload(fraction of a second).
    3. 
 

 

  

 

 

  Thank you in advance for your help.