[RESOLVIDO]vRaptor - JSon monta html porem nao permite utilizar onclick

Assuntos Gerais
#1

possuo o seguinte javascript:

$(document).ready(function(){    
       $('#addEmpresa').on('click', function(){  
          var self = $('#codigoDaEmpresa');  
          var selecionado = self.val(); // pega o codigo digitado no input    
          $.ajax({   
             url:'<c:url value="/usuario/addEmpresaTemp/" />'+selecionado,  
             type: 'POST',  
             dataType:'json',  
             success:function(data){  
                 var options = [];  
                 for (var i = 0; i < data.length; i++) {  
//monta os dados na table
                        options.push('<tr>');  
                        options.push('<td class="pCodigo">'+data[i].codigo+'</td>');  
                        options.push('<td>'+data[i].descricao+'</td>');  
                        options.push('<td>'+data[i].cnpj+'</td>');  
                        options.push('<td style="text-align:center;">'+  
                                     '<a style="text-align:center;" class="deleteRow" href="#">'+  
                                        '<img  alt="Excluir Empresa" src="<c:url value="/resources/img/icons/lixeira.png"/>">'+  
                                     '</a>'+            
                                     '</td>');  
                        options.push('</tr>');  
                    }   
                 $('#povoarEmpresa').html(options.join(''));  
             },    
             error:function(){  
                alert('Erro');  
             }    
          });    
       });    
    });

se vc prestar atenção estou montando nessa pagina esse td

options.push('<td style="text-align:center;">'+  
                                     '<a style="text-align:center;" class="deleteRow" href="#">'+  
                                        '<img  alt="Excluir Produto" src="<c:url value="/resources/img/icons/lixeira.png"/>">'+  
                                     '</a>'+            
                                     '</td>');

que será um icone para excluir a linha dessa tabela.

podem quando monta, ele fica tudo direitim como tem que ficar, porem quando eu clico nessa imagem era pra acionar o seguinte javascript:

//  remover empresa da tabela e da lista  
    $(document).ready(function() {  
        $('.deleteRow').click(function(){  
              var self = $(this);  
              var tr = self.closest('tr');  
              var codigo = self.parents('td').siblings('.pCodigo').html();  
              $.ajax({   
                 url:'<c:url value="/usuario/delEmpresaTemp/" />'+codigo,  
                 type: 'POST',  
                 success:function(){  
                    alert('chegou');  
                    tr.remove();  
                 },    
                 error:function(){  
                    alert('Erro');  
                 }    
              });    
           });

coloquei pra debugar e ele nao está acionando esse javascript

#2

Simples, troque isso: $('.deleteRow').click(function(){por isso $(this).on('click', '.deleteRow', function(){
O problema acontece pois, no primeiro caso, primeiro ele pega todos os elementos e coloca o evento lá. Quando vc cria o elemento depois, ele não vai executar aquele código pois ele já foi executado.
No segundo caso, quando o evento acontece, ele verifica se o evento está acontecendo em um elemento que tem aquele seletor e executa, por isso, independe o momento em que o objeto é criado, ele olha para a ação do usuário.

#3

Funcionou.

nesse caso o

esse this, está sendo a pagina completa?

edit: ah debuguei aqui e vi que o this está sendo o elemnto , entendi agora. estou tentando entender melhor olhando a api o funcionamento e a diferença entre esses 2. como por exemplo qual a diferença de usar um ou outro e pq nao usar um e usar o outro.

#4

Não, this não é o elemento “a”.

SOMENTE NO JQUERY, “this” vai ser sempre o elemento que originou a function em que você está.

Então, fica assim

$(document).ready(function(){ // aqui o this é o document. // isso aqui: $(this).on('click', '.deleteRow', function(){ // é a mesma coisa que: $(document).on('click', '.deleteRow', function(){ });

#5

Quando você faz isso:

$(this).on('click', '.deleteRow', function(){ var self = $(this); // Esse this é o elemento que foi clicado... //... });

#6