0

I am using the following code to implement plus / minus quantity buttons for a Woocommerce cart solution: 

console.log('rental')
// make quantity buttons work
$('.qib-container').on('click', '.plus, .minus', function () {
  console.log('clicked')
  // Get current quantity values
  var qty = $(this).closest('.qib-container').find('.qty')
  var val = parseFloat(qty.val())
  var max = parseFloat(qty.attr('max'))
  var min = parseFloat(qty.attr('min'))
  var step = parseFloat(qty.attr('step'))

  // Change the value if plus or minus
  if ($(this).is('.plus')) {
    console.log('plus')
    if (max && (max <= val)) {
      qty.val(max)
    } else {
      qty.val(val + step)
    }
  } else {
    if (min && (min >= val)) {
      console.log('else')
      qty.val(min)
    } else if (val > 1) {
      qty.val(val - step)
      console.log('else > 1')
    }
  }

And the HTML is as follows: 

<div class="qib-container">
        <button type="button" class="minus qib-button">-</button>
        <div class="quantity">
            <label class="screen-reader-text" for="quantity_5dd507573790b">Contenur prügikonteiner 140L kogus</label>           <input type="number" id="quantity_5dd507573790b" class="input-text qty text" step="1" min="0" max="" name="raq[9bb59b8531b987176485dff07c07c672][qty]" value="1" title="Kogus" size="4" inputmode="numeric">
        </div>
        <button type="button" class="plus qib-button">+</button>
    </div>

Everything works fine on the product listing page but when adding products to cart and going to the cart page the buttons stop working after 1-2 seconds like pointer-events arent working and the script is not running anymore.

Test issue yourself:

Step 1 Listing page: https://moya.no11.ee/lahenduste-rent/ (Add product to cart, quantity buttons work with same script like normal)

Step 2 Cart page (after adding product): https://moya.no11.ee/lahenduste-rent-paringukorv/ (try to change quantity fast after loading: initially works but it resets back to original state and does not work after that)

Any ideas what might be causing this?

user3615851
  • 999
  • 1
  • 15
  • 40
  • If you check the network tab of the console in the second page you'll see that the content is loaded dynamically using AJAX. As such the `.plus` and `.minus` elements don't exist in the DOM when you try to bind the event handlers to them. You need to use a delegated event handler. See the duplicate I marked for more information – Rory McCrossan Nov 20 '19 at 09:35
  • 1
    thanks. Fixed by changing to: $(document.body).on('click', '.qib-container *', function (e) { – user3615851 Nov 20 '19 at 09:44

0 Answers0