I tres botones + y - en Shopify que se ven como (abajo). El problema es que Shopify no incluye 3 formularios diferentes, actualiza dinámicamente los atributos HTML para mostrar los otros botones. Entonces, cuando hago clic en el segundo botón + , aumenta en 2 en lugar de 1. Solo funciona el primero.

El primer botón + funciona y aumenta o disminuye en 1. Pero el segundo aumenta en 2. Y el tercero no funciona en absoluto.

¿Cómo hacer que el evento de clic se aplique a los elementos que se actualizan dinámicamente en el HTML ?

jQuery

 $('.plus').on('click', function(e) { var val = parseInt($(this).prev('input').val()); $(this).prev('input').val(val + 1); }); $('.minus').on('click', function(e) { var val = parseInt($(this).next('input').val()); if (val !== 0) { $(this).next('input').val(val - 1); } if (val == 0) { $(this).next('input').val(1); } });

HTML:

 <div class="product-form__item product-form__item--quantity quantitiy_dv"> <label class="quantitiy" for="Quantity-collection-template-new"></label> <input class="minus minus1" type="button" value="-"> <input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input=""> <input class="plus plus1" type="button" value="+"> </div>

Por favor, hágamelo saber si necesita más información!