2

Estou desenvolvendo um carrinho de compras, estou querendo colocar um elemento dentro de uma DIV, este elemento tem uma função Jquery que não está funcionando sua chamada(função de remover produtos do carrinho).

$('.add_produto').click(function(){
       $.ajax({
           url: CI_ROOT + "frontend/site/add_produto",
           data: {
              id:$(this).attr("idproduto"),
          },
        dataType: "json",
        type: "POST",
        success: function(data){
            var verifica = $('.recebe_produto #'+data.produto.id_produto+'').html();

            $('.carrinho_vazio').remove();
            if (verifica == undefined) {

                var html =  '<div class="produtos_carrinho" id="'+data.produto.id_produto+'">'
                        +'<div class="imagem_carrinho"><img src="'+CI_ROOT+'img/'+data.produto.foto+'" style="margin-top:5px;"></div>'
                        +'<div class="carrinho_excluir">'
                            +'<a href="#" title="Alterar quantidade"><i class="icon-pencil"></i></a>'
                            +'<a style="cursor:pointer;" class="remove_produto" idproduto='+data.produto.id_produto+' qnt='+data.id_qnt+' title="Remover produto"><i class="icon-remove"></i></a>'
                        +'</div>'
                        +'<div class="descricao_carrinho">'
                           +' <font color="#A02D34">'+data.produto.nome+'</font><br>'
                            +' <span class="qnt">'+data.id_qnt+'</span> un - R$ <span class="valor">'+data.valor+'</span>'
                        +'</div>'
                        +'</div>'
                        $('.recebe_produto').append(html);
                        remove_produto();                        

            }else{

                $('#'+data.produto.id_produto+' .qnt').html(data.id_qnt);
                $('#'+data.produto.id_produto+' .valor').html(data.valor);
                $('#'+data.produto.id_produto+' .remove_produto').replaceWith('<a style="cursor:pointer;" class="remove_produto" idproduto='+data.produto.id_produto+' qnt='+data.id_qnt+' title="Remover produto"><i class="icon-remove"></i></a>');

            }
            var verifica_valor = $('.recebe_valor').html();

                        if (verifica_valor == "") {
                            var valor = '<div class="valor_carrinho">'
                            +'<div class="preco_carrinho">'
                                +'R$ <span class="total_produtos">'+data.valor_total+'</span><br>'
                                +'R$ 5,00<br>'
                                +'R$ <span class="total_carrinho">'+data.valor_total+'</span>'
                            +'</div>'
                                +'Total produtos <br>'
                                +'Taxa entrega <br>'
                                +'<b>TOTAL GERAL</b>'

                        +'</div>';
                        $('.recebe_valor').append(valor);

                    }else{

                        $('<span class="total_produtos">'+data.valor_total+'</span>').replaceAll('.total_produtos');
                        $('<span class="total_carrinho">'+data.valor_total+'</span>').replaceAll('.total_carrinho');   
                    }
        }   
    });
});
function remove_produto(){
     $('.remove_produto').click(function(){
        var id = $(this).attr("idproduto");
        var qnt = $(this).attr("qnt");
        $.ajax({
            url: CI_ROOT + "frontend/site/remover_produto",
            data: {
                id:id,
                qnt:qnt,
            },
            dataType: "json",
            type: "POST",
            success: function(data){

                if (data.id_qnt >= '1') {

                    $('#'+id+' .qnt').html(data.id_qnt);
                    $('#'+id+' .valor').html(data.valor_parcial);
                    $('.carrinhovazio').remove();
                    $('#'+id+' .remove_produto').replaceWith('<a style="cursor:pointer;" class="remove_produto" idproduto='+id+' qnt='+data.id_qnt+' title="Remover produto"><i class="icon-remove"></i></a>');
                    remove_produto();
                }else{

                    $('#'+id).remove();

                }

                if (data.valor === 0) {

                    $('.valor_carrinho').remove();
                    var html = '<div class="carrinho_vazio">'
                        +'<div class="carrinhovazio"><img src="'+CI_ROOT+'img/carrinho.jpg" style="margin-top:5px; margin-left:50px; width:50%;"></div>'
                        +'</div>'
                        $('.recebe_produto').append(html);

                }else{  

                    $('<span class="total_produtos">'+data.valor+'</span>').replaceAll('.total_produtos');
                    $('<span class="total_carrinho">'+data.valor+'</span>').replaceAll('.total_carrinho');

                }        
            }
        });
    });
}
10
  • Favor editar sua pergunta postando mais detalhes, de preferência incluindo o trecho de código relevante para que possamos avaliá-lo. Na forma como está, não está claro o que está perguntando.
    – mgibsonbr
    4/03/2014 às 20:17
  • cara posta o codigo ai 4/03/2014 às 20:21
  • Coloquei uma imagem da função de adicionar produtos no carrinho, preciso chamar a função remove_produtos, más atualmente do jeito que está não funcionada a chamada.
    – Fortunato
    4/03/2014 às 20:33
  • Na verdade ela chega a funcionar más não corretamente, quando clico em excluir produto, ele está fazendo várias requisições envés de apenas uma
    – Fortunato
    4/03/2014 às 20:35
  • 2
    Pronto está todo ai o código agora, o que está acontecendo é que ele faz mais de uma requisição quando deveria fazer apenas uma, e as vezes não funciona.
    – Fortunato
    4/03/2014 às 20:43

1 Resposta 1

4

O seu problema me parece ser que você está adicionando o handler à classe remove_produto várias vezes (uma vez a cada chamada de Ajax). Além disso, quando seu código entra no primeiro else você está substituindo elementos dessa classe por outros (replaceWith), e em nenhum momento você adiciona um handler a eles.

A maneira mais simples que vejo para solucionar isso é usar .on na classe remove_produto. Substitua a função remove_produto por:

$(document).on("click", ".remove_produto", function(){
    var id = $(this).attr("idproduto");
    var qnt = $(this).attr("qnt");
    ...
});

O método on tratará do evento click para todo elemento com a clase remove_produto, atual ou futuro, de modo que você não precisa reatribuí-lo cada vez que fizer Ajax. Ou seja, execute o código acima apenas uma vez.

1
  • Muito obrigado mgibsonbr funcionou perfeitamente agora. Realmente o problema era este.
    – Fortunato
    4/03/2014 às 20:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .