Element dynamically created by Ajax doesn't work

Question

I have this function in my Laravel project

$(document).on('click', '.btn-success',function(){
            var value=$(this).attr("value");
            var qtd = $('#qtd' + value).val();
            var cod = $(this).attr("codigo");

            $.ajax({
                type: 'get',
                url: '/carrinhoAjax',
                data: {
                    'item': value,
                    'quantidade':qtd,
                    'id_carrinho':carrinho
                },
                success: function(data) {
                    $('.cart').append(data);
                }
            });
        });

That creates this element:

<div id="{{$carrinho->id_material}}" class="glyphicon glyphicon-remove" style="cursor:pointer; margin-left:25px;"></div>

When I click this generated element it should call this other function:

$(".glyphicon").on("click", function () {
        var id = $(this).attr('id');
        var tr = $(this).closest('tr');
        var carrinho = {{Session::get('cart')}};

        $.ajax({
            type: 'get',
            url: '/removeAjax',
            data: {
                'item': id,
                'carrinho':carrinho,
            },
            success: function(data) {
                tr.remove();
            }
        });

But it doesn't. If I use this new element without an Ajax call it does work, so I don't think that the second function is the problem.

Your first snippet is using a delegate so you should have some understanding about what the issue is — Taplar, May 04 '18 at 19:01
Try using this snippet instead `$(".cart").on("click", ".glyphicon", function () {` — Hackerman, May 04 '18 at 19:05
@Hackerman that worked, thank you! I was focused too much on the first function. — Jean Morrison, May 04 '18 at 19:09

Element dynamically created by Ajax doesn't work

0 Answers0