I can not get the value of a child element

Question

I can not get the value of a child element

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I am filling a table as follows:

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

I just need to get the value inside the <a class="username"> element when the user clicks.

What I've already tried:

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

E:

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

And it does not just show anything on the console, nor a undefined . = (

javascript jquery

asked by anonymous 10.11.2017 / 01:24

2 answers

1

I'm not sure what to do. PS: If you do an insertion of another line after the full load of the screen, you need to redeclarate this condition again, just after inserting a line, otherwise the old ones will have this behavior.

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

10.11.2017 / 01:31

Doubt with month and year extraction in PostgreSql data How to apply hover effect (JQuery) to a specific group of classes?

score 2 · Accepted Answer

How to solve the problem:

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

See working

// 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><aclass="username">usuario_test</a></td>
      <td>55</td>
    </tr>
  </tbody>
</table>

You should put the code below inside the done method call of the 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());
});

See working

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>

References

on
off