Can not select a child of a div with jquery

Question

I am making some kind of Like/Dislike system, and I use jQuery to get a variable that I want to pass to an html <a> element.

When I use alert(), it alerts the result, but it doesn't want to print it into the <a> element, which means it doesn't select it.

I want this to work for every element(post). And it's also important that LIKE works fine for every different post.

Here's the code:

$(document).ready(function(){
  $('.foto').on("click", '.like',function(e){
    e.preventDefault();
    $(this).css("color","blue");
    var pid = $(this).val();
    var datastr = 'pid='+pid;
    $.ajax({
      type: "POST",
      url: "like.php",
      data: ({pid: pid}),
      dataType: 'json',
      success: function(result){
        $(this).children("a:first").html(result['ajax']);
      }
    });
  });
}); 

<div class=\"foto\">
  <h2>{$pic['fieldtwo']}</h2>
  <div class=\"slikata\">
    <img src=\"{$pic['fieldone']}\" width=\"98%\" height=\"auto\">
  </div>
  <div class=\"dolu\">
    <form method=\"post\" action=\"\">
      <button type=\"button\" class=\"like\" type=\"submit\" value=\"{$pic['post_id']}\">
        Like
      </button>
      <button type=\"button\" class=\"dislike\" type=\"submit\" value=\"{$pic['post_id']}\">
        Dislike
      </button>
      <a>PRINT THE VARIABLE HERE</a> 
      <a>Comments({$ncom})</a> 
      <a>Posted by:{$pic['post_user']}</a>
    </form>
  </div>
</div>

Answer 1

Once you go inside the $.ajax(), the scope of $(this) changes. So you need to save the $(this) you actually want for later use:

$(document).ready(function(){
  $('.foto').on("click", '.like',function(e){
      e.preventDefault();
      $(this).css("color","blue");
      var pid = $(this).val();
      var datastr = 'pid='+pid;
      var eFoto = $(this); // store it here
      $.ajax({
            type: "POST",
            url: "like.php",
            data: ({pid: pid}),
            dataType: 'json',
            success:function(result){
              eFoto.find("a:first").html(result['ajax']); // use it here
            }
      });
  });
}); 

EDIT:

You'll also want to use .find() instead of .children() since the <a> in question is more than one level down from .foto.

Thanks @yoshi

Answer 2

mopo922 is right, your context is lost when you pass a callback to $.ajax

You can try to bind the context, modify your code to the following:

$(document).ready(function(){
  $('.foto').on("click", '.like',function(e){
    e.preventDefault();
    $(this).css("color","blue");
    var pid = $(this).val();
    var datastr = 'pid='+pid;
    $.ajax({
      type: "POST",
      url: "like.php",
      data: ({pid: pid}),
      dataType: 'json',
      success: function(result){
        $(this).children("a:first").html(result['ajax']);
      }.bind(this) //bind the current context to the callback
    });
  });
});