Как сообщить jquery что dom изменен?

Question

[Владимир Хаттер]

Гуру, здравствуйте!
Проблема возникла где не ждал.
Пишу добавление / удаление товара в корзину, проблема в том что при клике на кнопке удалить скрипт не видит новый элемент. Как с этим бороться?

$('.cart-list>li').click(function(e){
		e.preventDefault();
		var price = parseInt($(this).children('price').text());
		var total = parseInt($('.total>b').text());
		var bigTotal = parseInt($('.big-total>b').text());
		$('.total>b').html(total-price+'<i class="ico ico-rub"></i>');
		$('.big-total>b').html(total-price+350+'<i class="ico ico-rub"></i>');
		$(this).remove();
	});

$('.buy').click(function(e){
		e.preventDefault();
		var addItems = $(this).data();
		// console.log(addItems.img);
		$('.cart-list').append('<li><img src="'+addItems.img+'" class="img-small" alt=""><tt>'+addItems.title+'</tt><span>1</span><i class="ico ico-times"></i><price>'+addItems.price+'&nbsp;<i class="ico ico-rub"></i></price><a class="del" href="#"><b class="ico ico-trash"></b></a></li>');
	});

Answer 1

[tyzberd]

https://learn.javascript.ru/event-delegation
https://learn.jquery.com/events/event-delegation/

Comments

[tyzberd]

в вашем случае как то так

$('.cart-list').on('click', '.cart-list>li', function(e){
    e.preventDefault();
    var price = parseInt($(this).children('price').text());
    var total = parseInt($('.total>b').text());
    var bigTotal = parseInt($('.big-total>b').text());
    $('.total>b').html(total-price+'<i class="ico ico-rub"></i>');
    $('.big-total>b').html(total-price+350+'<i class="ico ico-rub"></i>');
    $(this).remove();
  });

Answer 2

[Виталий]

Для динамических элементов используется делегированная обработка собятий, и схематически это выглядит так:

$('parent_static').on('event', 'children_dinamic', handler);

Где parent_static - это статичный родительский элемент (лучше ближайший, но подойдёт и body), event - событие, children_dinamic - дочерний динамический элемент, на котором обработчик и должен сработать. При этом указатель this или объект jQuery $(this) в обработчике - имено дочерний динамический элемент.

Как это применимо к вашему коду, tyzberd в комментарии к своему ответу написал.

Comments

[Владимир Хаттер]

Спасибо!!!

Answer 3

[Дима Паутов]

https://habr.com/company/ruvds/blog/351256/