Jquery function call

Navigation
2

I'm developing a shopping cart, I'm wanting to put an element inside a DIV, this element has a Jquery function that is not working your call (remove cart products function). 

$('.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');

                }        
            }
        });
    });
}
    
asked by anonymous 04.03.2014 / 21:13

1 answer

4

Your problem seems to me to be that you're adding the handler to the remove_produto class multiple times (once every Ajax call). Also, when your code enters the first else you are replacing elements of this class with others ( replaceWith ), and at no time do you add a handler to them.

The simplest way I can solve this is to use .on in the remove_produto class. Replace the remove_produto function with: 

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

The on method will treat the event click for every element with the remove_produto , current or future class, so you do not have to reassign it every time you do Ajax. That is, run the above code only once .

    
04.03.2014 / 21:51
Error: subquery returning more than one result Oracle 11 is expiring passwords. How do I reset this?