jQuery function non-reversible. [website cart feature]

Question

I'm pretty new to the world of jQuery and having some difficulty with a cart feature I am trying to add to a website.

I have created a function to add an element (based on its id) to the cart. This works fine. However when I try to reverse it (say someone clicks on the cart icon again to remove it) the cart count increases more and the class doesn't change back.

You will see in my code I am changing the classes for visual representation (unselected = svg with no fill & selected = svg with fill).

I have tried toggling the class, removing and adding the class but I can't think of much more. Any help would be greatly appreciated!

$(document).ready(function() {
  var cart = [];
  $("a.addToCart").click(function(event) {

      var pressedId = event.target.id;
      $("#cart_button").removeClass("hidden");
      $("#" + pressedId).removeClass("addToCart");
      $("#" + pressedId).addClass("addedToCart");
      
      cart.push(pressedId)

      $('.cart--counter').html(cart.length);

  });


});

$(document).ready(function() {

  $("a.addedToCart").click(function(event) {

    var unpressedId = event.target.id;
    $("#" + unpressedId).addClass("addToCart");
    $("#" + unpressedId).removeClass("addedToCart");

    cart.splice( $.inArray(unpressedID,cart) ,1 );

    $('.cart--counter').html(cart.length);


  });

});

Here is an example of the HTML with a class and ID.

<a id="12" class="addToCart">

Again, for clarification: the class changes appropriately from "addToCart" to "addedToCart" but is not reversible & the array is successfully updated with appropriate "ID" but can not be removed again.

Nick · Accepted Answer · 2020-09-15T01:19:57.323

0

Your issue is that when you add your event handlers, there are no elements with class addedToCart, so no event handlers get assigned. You need to use a delegated event handler instead:

var cart = [];

$(document).ready(function() {
  $(document).on('click', "a.addToCart", function(event) {
    var pressedId = event.target.id;
    $("#cart_button").removeClass("hidden");
    $("#" + pressedId).removeClass("addToCart");
    $("#" + pressedId).addClass("addedToCart");

    cart.push(pressedId)

    $('.cart--counter').html(cart.length);
    $('#cart').html(cart.toString());
  });
});

$(document).ready(function() {
  $(document).on('click', "a.addedToCart", function(event) {
    var unpressedId = event.target.id;
    $("#" + unpressedId).addClass("addToCart");
    $("#" + unpressedId).removeClass("addedToCart");

    cart.splice($.inArray(unpressedId, cart), 1);

    $('.cart--counter').html(cart.length);
    $('#cart').html(cart.toString());
  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="12" class="addToCart">Item 12</a><br />
<a id="13" class="addToCart">Item 13</a>
<div class="cart--counter">**</div>
<br />
<div id="cart"></div>
<br />
<div id="cart_button" class="hidden">cart button</div>

edited Sep 15 '20 at 01:19

answered Sep 14 '20 at 23:15

Nick

138,499
22
57
95

I attempted this solution and it allowed the item to be removed out of the array but the class isn't changing for some reason. I tried adding multiple cart elements and then displaying the array. All fine. Then I 'reselected' one of the cart elements and it removed from the array, but it popped only the last item off of the array and gave me no output for the id value when asked to show it in an alert box. – karldamus Sep 15 '20 at 01:09
@KraftDamus I've updated the demo with multiple items, displaying the contents of the cart array with each addition/removal. In the demo it works exactly as expected (and if you `Inspect element` on the `a` links you will see them change class when they are clicked). – Nick Sep 15 '20 at 01:20
Okay, so I tried it with text inside the tag and that worked... but i'm trying to use a visual...an svg to be exact. for some reason the a tag is not liking anything other than text. – karldamus Sep 15 '20 at 01:47
@KraftDamus that seems to be an issue with svg, dependent on how you are instantiating it within the tag. See https://stackoverflow.com/questions/11374059/make-an-html-svg-object-also-a-clickable-link and https://stackoverflow.com/questions/22615049/why-doesnt-an-html-anchor-tag-wrap-a-scalable-svg-object – Nick Sep 15 '20 at 02:05

jQuery function non-reversible. [website cart feature]

1 Answers1