I can’t get the value of a child element

Asked

Viewed 128 times

2

I’m 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>');
        });
    });
});

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

What I’ve already tried:

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

And:

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

And nothing just appears on the console, not one undefined. =(

javascript jquery

  • if you posted the button or link would already be halfway...

  • I don’t get your comment. @Michelsimões

  • Put the html from the button in the post man!

  • Try putting an example of the generated html for the whole table, so we can test here and solve the problem. o <a> wasn’t supposed to have href ? Or is the cursor by css?

  • @Michelsimões That’s it! I’m creating hair append jquery!

  • @Isac O <a> have href or not, does not interfere with function click().

  • was bad :) look at the answer if the value Voce wants is the users.login should give, but each time Voce makes an insertion of a line dynamically by JS Voce should redeclare that . click to fit the new line

  • @Francisco Yes I know, it was a question aside, because I thought it was strange not to have and I might not have noticed.

Show 3 more comments

2 answers

2


The ways to solve the problem:

  1. Make association of events Click for the elements already in the GIFT and for those created subsequently.

    $('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><a class="username">usuario_test</a></td>
      <td>55</td>
    </tr>
  </tbody>
</table>

  1. You must place the code below within the method call done of function 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

1

Do it like Hamps and say if it worked... PS: If you insert another line after the full screen load, you need to redeclare this condition again, right after inserting a line, if not only the old ones will have this behavior.

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

  • What do you mean redeclare? How would I do that? I tried to put inside a function and call when finishing the ajax, but it didn’t work.

  • for example, each time you call the method to add a line, at the end Voce copies the code, so it 'join' the new line as well.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.