Почему событие не отрабатывает второй раз?

Question

[last_round]

Есть скрипт:

function check(){
		
		$('.c-item-qua').each(function(index){
			text = $(this).text()
			str = text.replace('-', '');
			str = str.replace('+', '');
			if( str == 0 ){
				child = $(this).children('.c-item-qua-change');
				$(child[0]).velocity({opacity: 0}, {duration: 400, delay: 300});
			}else{
				child = $(this).children('.c-item-qua-change');
				$(child[0]).velocity({opacity: 1}, {duration: 400, delay: 100});
			}
		});
	}
	
	check();
	
	$('.c-item-qua-change').on('click', function(){
		text = $(this).text();
		
		parentChange = $(this).parent().parent();
		nameFood = $(parentChange).children('.c-item-name').text();
		priceFood = $(parentChange).children('.c-item-price').text();
		priceFood = priceFood.replace('$', '');
		countFood = $(this).parent().text().replace(/[\+\-]/g,'');
		
		console.log(price);
		if(text == "-"){
			price = parseInt(price) - parseInt(priceFood);
			if( price < 0 ){
				alert('Error price');
			}else{
				countFood--;
				$(this).parent().html('<span class="c-item-qua-change">-</span> '+ countFood +' <span class="c-item-qua-change">+</span>');
			}
			
		}else{
			price = parseInt(price) + parseInt(priceFood);
			countFood++;
			$(this).parent().html('<span class="c-item-qua-change">-</span> '+ countFood +' <span class="c-item-qua-change">+</span>');
		}
		
		check();
	});

и HTML код:

<div class="container-item">
	<div class="c-item-name">Salt</div>
	<div class="c-item-qua"><span class="c-item-qua-change">-</span> 1 <span class="c-item-qua-change">+</span> </div>
	<div class="c-item-price">$3</div>
</div>

Суть проблемы. Когда кликаю 1-й раз на элемент, то всё отрабатывает хорошо, но когда второй раз нажимаю, то ничего не происходит. Подозреваю что родитель перекрывает. (p.s. родитель отрабатывает всё нормально)

Comments

[Maks Codov]

а что должно происходить и когда?

Answer 1

[Алексей]

Возможно при

$(this).parent().html('<span class="c-item-qua-change">-</span> '+ countFood +' <span class="c-item-qua-change">+</span>');

сбрасываются установленные $('.c-item-qua-change').on('click'...
Попробуйте $('.c-item-qua-change').on('click', ... заменить на $('body').on('click', '.c-item-qua-change', ...)
Вместо body можно поставить ближайший вышестоящий от .c-item-qua-change селектор, который не перезаписывается.