There is a functional that dynamically removes / adds the product to the basket, respectively, showing the changes. Now the problem is that after loading the page -> adding goods to the basket -> removing the same product from the basket -> re-adding the same product to the basket -> re-deletion does not work. Having rustled through the network, I learned that it is possible to bind an event to a child element, but I just need to bind it to the parent.

The code is:

  var response = JSON.parse(response); $('.box3 .basket .counter').empty().append(response.countBasket); var image = response.product.images.split(',')[0]; var newElement = ""; newElement += '<li class="basket-list-item" data-id="' + productId + '">'; newElement += '<div class="img-frame">'; newElement += '<img src="/site_media/' + image + '/" alt="">'; newElement += '</div>'; newElement += '<h4 class="title">' + response.product.title + '</h4>'; newElement += '<p>' + response.product.material + '</p>'; newElement += '<span>Quantity: <span class="basket-item-quantity">' + response.product.quantity + '</span></span>'; newElement += '<a class="icons-square-close"></a>'; newElement += '</li>'; basketList.append(newElement);

The event itself:

 $('.popup-basket a.icons-square-close').on('click', '.basket-list-item', function (e) { e.preventDefault(); var id = $(this).closest('li').attr('data-id'); var title = $(this).closest('li').find('.title').text(); removeFromTheBasket(id, title); });

In the removeFromTheBasket() function, the removeFromTheBasket() simply displayed and the item is removed from the basket.

    1 answer 1

    In general, I hung the event handler not on a.icons-square-close , but on the ul.popup-basket tag, in which I had already caught the tag that was clicked. The new code looks like this:

     $('.popup-basket').on('click', function (e) { e.preventDefault(); var target = e.target; var li = $(target).closest('li'); if(li){ var id = li.attr('data-id'); var title = li.find('.title').text(); removeFromTheBasket(id, title); }else{ return; } });