Código JavaScript funciona em partes

[Matheus P. 1]

Seguinte, eu fiz uma tela para adicionar uma venda, os produtos podem ser adicionados/removidos dinamicamente com JavaScript, porém, ele adiciona os campos para inserir produto normalmente, mas é como se ele não existisse, pois após adicionados, o botão de "remover" não funciona e o PHP não pega as requisições dos campos adicionados dinamicamente.

    var count = 1;
    var campo = document.getElementById("copyhash").value;

    $( "#duplicar" ).click(function() {
        $( "#fields" ).append(
            '<div id="item-'+ count +'" class="col-md-12 item">' +

            '<input id="copyhash" value="'+ campo +'" type="hidden" name="data[Item]['+ count +'][sale_hash]"/>' +

            '<div class="form-group">' +
            '<div class="col-md-4 col-xs-12">' +
            '<div class="input-group">' +
            '<span class="input-group-addon"><span class="fa fa-folder-open"></span></span>' +
            '<select name="data[Item]['+ count +'][product_id]" class="form-control select2" required="required" id="SalePredated">' +
            '<option value="">Selecione um produto...</option>' +
            '<option value="1">Acessório</option>' +
            '<option value="2">Bermuda</option>' +
            '<option value="3">Blusa</option>' +
            '<option value="4">Bolsa</option>' +
            '<option value="5">Calça</option>' +
            '<option value="6">Cinto</option>' +
            '<option value="7">Macacão</option>' +
            '<option value="8">Regata</option>' +
            '<option value="9">Saia</option>' +
            '<option value="10">Vestido</option>' +
            '</select>' +
            '</div>' +
            '</div>' +

            '<div class="col-md-4 col-xs-12">' +
            '<div class="input-group">' +
            '<span class="input-group-addon"><span class="fa fa-info"></span></span>' +
            '<input name="data[Item]['+ count +'][descricao]" placeholder="Detalhes" class="form-control" maxlength="10" type="text" id="SalePredated"/>' +
            '</div>' +
            '</div>' +

            '<div class="col-md-3 col-xs-12">' +
            '<div class="input-group">' +
            '<span class="input-group-addon"><span class="fa fa-money"></span></span>' +
            '<input name="data[Item]['+ count +'][amount]" placeholder="0,00" class="form-control" required="required" maxlength="10" type="text" id="SalePredated"/>' +
            '</div>' +
            '</div>' +

            '<div class="col-md-1 col-xs-12">' +
            '<div class="remover input-group">' +
            '<span class="fa fa-close" style="cursor: pointer; color: #ff6218; font-size: 28px; text-align: right;"></span>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>');

        count++;
    });



    $('div.remover').click(function(){
        $(this).parent().parent().remove();
    });

[AndersonMamede 88]

Acontece que no momento que você adicionou o evento no div.remover os elementos ainda não existia, ou seja, o evento só foi adicionado nos que já existiam até aquele momento. Para fazer com que os eventos funcionem em elementos que forem adicionados depois, utilize o on:

 

http://api.jquery.com/on/

$(document).on('click', 'div.remover', function(){
    $(this).parent().parent().remove();
});

[Matheus P. 1]

 

Acontece que no momento que você adicionou o evento no div.remover os elementos ainda não existia, ou seja, o evento só foi adicionado nos que já existiam até aquele momento. Para fazer com que os eventos funcionem em elementos que forem adicionados depois, utilize o on:

 

http://api.jquery.com/on/

$(document).on('click', 'div.remover', function(){
    $(this).parent().parent().remove();
});

 

Obrigado, ajudou bastante. Agora tenho que resolver o problema do PHP, mas são outros 500.

[AndersonMamede 88]

Beleza! :P

 

Bom, se precisar abrir tópico, pode fazer na seção de PHP:

http://forum.imasters.com.br/forum/3-php/