retrieving text using this.text() and jquery

Question

I'm trying to get the text within the clicked linked by using this

    $(".ajax-append").click(function(event) { 
     $.get("includes/fight.php?name=test", function(html) { 

     console.log($(this).text());
     console.log($(this));

        // append the "ajax'd" data to the table body 
        $("table tbody").append(html); 
        // let the plugin know that we made a update 
        $("table").trigger("update"); 
        // set sorting column and direction, this will sort on the first and third column 
        var sorting = [[2,1],[0,0]]; 
        // sort on the first column 
        $("table").trigger("sorton",[sorting]); 
    }); 
    return false; 
});

the markup looks like this

<div class="friend" id="friend6" style="padding 5px; height: 54px; margin-bottom: 10px;">
<div style="float: left; width: 54px;">
       <img style="border:2px solid #E1E1E1;" src="6.jpg"/>
</div>
<div id="name6" style="float: left; padding-top: 20px; padding-left: 10px; font-size: 14px; width: 200px">
 <a href="#" class="ajax-append" id="6">name 6</a>
</div>
</div>
<div class="friend" id="friend7" style="padding 5px; height: 54px; margin-bottom: 10px;">
<div style="float: left; width: 54px;">
 <img style="border:2px solid #E1E1E1;" src="7.jpg"/>
</div>
<div id="name7" style="float: left; padding-top: 20px; padding-left: 10px; font-size: 14px; width: 200px">
 <a href="#" class="ajax-append" id="7">name 7</a>
</div>

I can get the text within the anchor tag if i use an specific id but I'm trying to achieve this using $(this) and the alert message is always undefined.

Can any one point out what's going wrong? or think of a better way to do it?

Thanks.

Answer 1

It is because you are using this in an ajax callback which no longer refers to the element being clicked.

Answer 2

try this:

$(".ajax-append").click(function(event) { 
    var element=this;
     $.get("includes/fight.php?name=test", function(html) { 

     console.log($(element).text());
     console.log($(element));

        // append the "ajax'd" data to the table body 
        $("table tbody").append(html); 
        // let the plugin know that we made a update 
        $("table").trigger("update"); 
        // set sorting column and direction, this will sort on the first and third column 
        var sorting = [[2,1],[0,0]]; 
        // sort on the first column 
        $("table").trigger("sorton",[sorting]); 
    }); 
    return false; 
});

Answer 3

In the context of your code, $(this) is an AJAX request.

The easiest way will be to set a variable before your AJAX call, and consume it within the $get.

Answer 4

$(".ajax-append").each(function(){
     $(this).click(function(event) { 
          $.get("includes/fight.php?name=test", function(html) { 

          console.log($(this).text());
          console.log($(this));

             // append the "ajax'd" data to the table body 
             $("table tbody").append(html); 
             // let the plugin know that we made a update 
             $("table").trigger("update"); 
             // set sorting column and direction, this will sort on the first and third column 
             var sorting = [[2,1],[0,0]]; 
             // sort on the first column 
             $("table").trigger("sorton",[sorting]); 
         }); 
         return false; 
     }
});

Answer 5

Nice one guys, thanks. Can't believe i missed that.