2

Estou preenchendo uma table da seguinte maneira:

$.ajax({
    method: "GET",
    url: "https://api.github.com/search/users",
    data: { q: search, sort: "repositories" }
})
.done(function( msg ) {
    jQuery.each(msg.items, function(i, users){
        getRepositories(users.repos_url).done(function (result) {
            var repositories = result.length;
            $( 'tbody' ).append('<tr class="user"><td><a class="username">' + users.login + '</a></td><td>' + repositories + '</td>');
        });
    });
});

Só que eu preciso pegar o valor dentro do elemento <a class="username">, quando o usuário clicar.

O que eu já tentei:

$( ".user .username" ).click( function() {
    console.log($( this ).text());  
});

E:

$( ".user" ).click( function() {
    console.log($( this ).children('a').text());    
});

E não aparece simplesmente nada no console, nem um undefined. =(

8
  • se vc postasse o botãozinho ou link já ia ser meio caminho... Commented 10/11/2017 às 0:30
  • Não entendi seu comentário. @MichelSimões
    – Francisco
    Commented 10/11/2017 às 0:31
  • Poe o html do botão no post man! Commented 10/11/2017 às 0:32
  • Tente colocar um exemplo do html gerado para a tabela toda, para podermos testar aqui e resolver o problema. o <a> não era para ter href ? Ou está a dar o cursor por css?
    – Isac
    Commented 10/11/2017 às 0:34
  • @MichelSimões Já está! Estou criando pelo append do jquery!
    – Francisco
    Commented 10/11/2017 às 0:42

2 Respostas 2

2

A jeitos de se resolver o problema:

  1. Fazer associação do eventos Click para os elementos ja no DOM e para os que forem criados posteriormente.

    $('table').on('click', 'a.username', function(e){
        console.log($(this).text());
    });
    

    Veja funcionando

// Define o evento click
$('table').on('click', 'a.username', function(e){
  console.log($(this).text());
});

var search = 'wellmotta';
$.ajax({
    method: "GET",
    url: "https://api.github.com/search/users",
    data: { q: search, sort: "repositories" }
})
.done(function( msg ) {
    jQuery.each(msg.items, function(i, users){
        getRepositories(users.repos_url).done(function (result) {
          var repositories = result.length;
          $( 'tbody' ).append('<tr class="user"><td><a class="username">' + users.login + '</a></td><td>' + repositories + '</td>');
        });
      
    });
});

var getRepositories = function(url) {
  return $.ajax({
    method: "GET",
    url: url
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Username</th>
      <th>Repositories</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="username">usuario_test</a></td>
      <td>55</td>
    </tr>
  </tbody>
</table>

  1. Você deve colocar o código abaixo dentro da chamada do método done da função getRepositories

    // off: remove a associação do evento click
    // on: faz associação do evento click
    $(".username").off('click').on('click', function() {
        console.log($(this).text());
    });
    

Veja funcionando

var search = 'wellmotta';
$.ajax({
    method: "GET",
    url: "https://api.github.com/search/users",
    data: { q: search, sort: "repositories" }
})
.done(function( msg ) {
    jQuery.each(msg.items, function(i, users){
        getRepositories(users.repos_url).done(function (result) {
          var repositories = result.length;
          $( 'tbody' ).append('<tr class="user"><td><a class="username">' + users.login + '</a></td><td>' + repositories + '</td>');
    $(".username").off('click').on('click', function() {
      console.log($(this).text());
    });
        });
      
    });
});

var getRepositories = function(url) {
  return $.ajax({
    method: "GET",
    url: url
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Username</th>
      <th>Repositories</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Referências

1

Faz assim champs e diz se deu certo... PS: Se voce fizer uma inserção de outra linha após o carregar total da tela, precisa redeclarar essa condição novamente, logo após inserir uma linha, se não só as antigas terão esse comportamento.

$(".username" ).click( function() {
        console.log($(this).html());    
});
2
  • Como assim redeclarar? Como eu faria isso? Tentei colocar dentro de uma função e chamar quando finalizar o ajax, mas não funcionou.
    – Francisco
    Commented 10/11/2017 às 0:49
  • por exemplo, cada vez que você chamar o método para adicionar uma linha, ao final voce copia o código, para ele 'aderir' à nova linha também. Commented 10/11/2017 às 0:53

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 .