Tengo un recuento de la lista del carrito de la vista del carrito de compras y este documento
<div class="input-group input-number-group"> <div class="input-group-button" onclick="decrement_cart(this)"> <span class="input-number-decrement">-</span> </div> <input class="input-number text-center" type="number" value="{{ $detail['product_quantity'] }}" min="0" max="1000"> <div class="input-group-button" onclick="increment_cart(this)"> <span class="input-number-increment">+</span> </div> </div>y quiero cambiar el valor de entrada medio haciendo clic en incrementar/decrementar div. nota: no puedo usar addEventListener porque este documento es creado por ajax.
¿Cómo puedo cambiar el valor de entrada haciendo clic en eso?
function increment_cart(elem) { console.log(elem.closest('input')); }No hay ninguna razón por la que no pueda agregar el controlador de eventos usando addEventListener. Incluso si el elemento que intenta adjuntar, el controlador se crea dinámicamente después de cargar el documento. Pero como no especificó nada en detalle sobre ese punto en el tiempo, todo lo que pude hacer fue sugerir cómo seleccionar los elementos hermanos del controlador de eventos llamado de la forma que especificó en su código html (con controladores de eventos en línea). Este enfoque no es muy bueno porque solo puede adjuntar un controlador de esa manera y no está estrictamente vinculado a un alcance claro sino a una cadena que se evaluará.
De todos modos, para abordar estrictamente su problema al intentar buscar a los hermanos, debe usar .next() y .prev() (JQuery) para obtener el hermano siguiente y anterior.
Pero, dado que estaba buscando una solución mejor, le mostré cómo adjuntar esas funciones como controladores de eventos de los eventos de clic para todos los .input-number-increment y .input-number-decrement usando la función attachHandlers y cómo esos controladores debe tratar con event.target para obtener una referencia al elemento que activa el evento y cómo llegar a los elementos deseados desde allí usando .closest() para recuperar el padre primero y luego .find() para capturar la input entre sus hijos.
Aquí hay una demostración para mostrar el concepto (agregando encima de su código):
//I'm calling the attachHandlers on page load (but you have to call it once the elements are created) attachHandlers(); function attachHandlers(){ $('.input-number-increment').on('click', increment_cart); $('.input-number-decrement').on('click', decrement_cart); } function increment_cart(event) { //gets the element triggerring the event const target = event.currentTarget; //gets the input element, finding it among the children of .input-number.group parent const o = $(target).closest('.input-number-group').find('input'); const currValue = (o.val() === undefined || o.val() === '') ? 0 : parseInt(o.val()); o.val( currValue+1 ); } function decrement_cart(event) { //gets the element triggerring the event const target = event.currentTarget; //gets the input element, finding it among the children of .input-number.group parent const o = $(target).closest('.input-number-group').find('input'); const currValue = (o.val() === undefined || o.val() === '') ? 0 : parseInt(o.val()); o.val( currValue-1 ); } .input-group-button{ cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input-group input-number-group"> <div class="input-group-button"> <span class="input-number-decrement">-</span> </div> <input class="input-number text-center" type="number" value="0" min="0" max="1000"> <div class="input-group-button"> <span class="input-number-increment">+</span> </div> </div>