[SOLVED] Get a stepper value on change in a virtual list

Hello,

I have rendered steppers in a virtual list. Am looking for ways to capture the change event of the stepper value together with the data-so_uuid value.

itemTemplate:
'<li data-so_uuid="{{so_uuid}}" >' +
	'<a href="#" class="item-content">' +
		'<div class="item-inner">' +
			'<div class="item-title-row">' +
				'<div class="item-title">' +
					'<div class="chip">' +
						'<div class="chip-label">{{so_description}}</div>' +											
					'</div><br>'+																				
				'</div>' +
				'<div class="item-after">' +
					'<div class="stepper stepper-init stepper-fill color-green cart_stepper">'+
						'<div class="stepper-button-minus"></div>'+
						'<div class="stepper-input-wrap">'+
							'<input type="text" value="{{so_quantity}}" min="0" max="100" step="1" readonly>'+
						'</div>'+
						'<div class="stepper-button-plus"></div>'+
					'</div>'+									
				'</div>' +									
			'</div>' +
		'</div>' +
	'</a>' +
'</li>',

Any Ideas?

Found a solution

Added a class class="my_stepper" to the input the input tag and access the value on click using

$('.virtual-list .cart_stepper').on('click', 'li', function () {
								
	console.log($(this).find('.my_stepper').val());
	
});

It worked!

1 Like