JQuery функция .on() работает только первый раз?

Question

[Хазрат Гаджикеримов]

Ниже код, проблема в том что первый кусок кода работает а второй сразу за ним идущий не работает.

$('body').on('click','.cart-add',function(){alert('Добавить')})

$('body').on('click','.unset-element-cart',function(){alert('Удалить')})

Почему так происходит?
полный код

$('body').on('click','.cart-add',function(){
        var is       = $(this);
        var cart     = $('.cart-html');
        var cartlist = cart.find('.cart-list');

        if(is.hasClass('add-cart-add')){
            is.data('num',parseInt($('#num-count-tovar').val()));
        }

        if(is.hasClass('active')){return false;}
        is.addClass('active');

        $('.cart-icon').addClass('tada');


        $('#cart-count').text(parseInt($('#cart-count').text())+is.data('num'));
        $('#cart-main-count').text(parseInt($('#cart-main-count').text())+is.data('num'));
        $('#cart-sum').text(parseInt($('#cart-sum').text())+is.data('price'));

        cartlist.append('' +
            '<li class="parent">' +
            '   <div class="cart-block-img" style="background-image: url(/public/img/product/min/'+is.data('img')+')"></div>' +
            '   <div class="cart-block-info">' +
            '       <strong><a href="/tovar/'+is.data('id')+'">'+is.data('name')+'</a></strong>' +
            '       <span>Артикул: '+is.data('art')+'</span>' +
            '   </div>' +
            '   <div class="cart-block-count">' +
            '       <input class="count-cart-add" type="number" disabled name="price-cart" placeholder="1" value="1" min="1" max="100">' +
            '       <span class="cart-plus fa fa-caret-up"    data-price="'+is.data('price')+'" data-art="'+is.data('art')+'"></span>' +
            '       <span class="cart-minus fa fa-caret-down" data-price="'+is.data('price')+'" data-art="'+is.data('art')+'"></span>' +
            '   </div>' +
            '   <div class="cart-block-price">' +
            '       <strong class="element-cart-price">'+is.data('price')+' руб.</strong>' +
            '       <span>в наличии</span>' +
            '   </div>' +
            '   <div class="cart-block-unset">' +
            '       <i class="unset-element-cart" data-art="'+is.data('art')+'" data-num="'+is.data('num')+'" data-price="'+is.data('price')+'"></i>' +
            '   </div>' +
            '</li>');
        $.ajax({
            url: '/',
            data:{
                server: 'add-car',
                id    : is.data('id'),
                art   : is.data('art'),
                num   : is.data('num')
            },
            dataType: 'json',
            success: function (data){}
        }) 
        setTimeout(function(){
            $('.cart-icon').removeClass('tada');
        },600)
        event.stopPropagation();
        return false;

    });

Второй кусок кода который не работает

$('body').on('click','.unset-element-cart',function(){
        alert('Удалить')
    })

Answer 1

[Евгений Петров]

1. Вот это знаете зачем?
event.stopPropagation();

2. Вот это зачем в обработчике?
return false;

Comments

[Хазрат Гаджикеримов]

Знаю зачем, что бы конкретно это событие не всплывало

[Хазрат Гаджикеримов]

return false; что бы по ссылке не перешел.

[Евгений Петров]

@Hazrat несмотря на то, что вы забыли указать структуру, я полагаю, что .unset-element-cart находится внутри .cart-add.

[Евгений Петров]

@Hazrat как я и думал — вы не понимаете, зачем это.
Эта инструкция бесполезна. Используют preventDefault().

[Хазрат Гаджикеримов]

@Petroveg Ошиблись, .cart-add на ходится под товаром, а .unset-element-cart в корзине.

[Евгений Петров]

@Hazrat забавно... Выкиньте всё, кроме event.stopPropagation() из первого обработчика и проверьте.

[Хазрат Гаджикеримов]

@Petroveg Вы были правы, проблема была из за event.stopPropagation(), но стоял на всплывающем блоке

[Евгений Петров]

@Hazrat и ловите в document. Именно так:
$(document).on();
Даже если использовать body, задумайтесь над разницей между $(document.body) и $('body') — что будет быстрее и почему?

[Хазрат Гаджикеримов]

Проблема в том что, при клике на кнопку фон затемняется и всплывает блок, а мне нужно сделать так что при клике на пустое пространство скрывался блок а тыкая по корзине событие не всплывалось и блок не скрывается

var block = $('.cart-block');
        block.addClass('active');
        event.stopPropagation();

        $('body').addClass('fixed');

[Евгений Петров]

@Hazrat вот тут примерно такая же задача — ловить клик за пределами элемента
Как перехватить клик вне модального окна bootstrap?