Ajax sends data , but returns nothing

Question

I have got this html

<div class="Likes" data-i=<?php echo $row[8];?>>
    <img src="../img/like.png">
    <p class="L_c"><?php echo $row[4];?></p>
</div>

And this jquery/ajax

$(".Likes").click(function() {
    var i = $(this).attr("data-i");
    $.ajax({
        type: "GET",
        url: '../connect.php',
        data: "I=" + i,
        success: function(data) {
            $(this).children(".L_c").html(data);
        }
   });
});

Connect.php

if (isset($_GET["I"]) && !isset($_GET["C"])) {

    $RandS=$_GET["I"];

    $query3=$con->query("SELECT id,likes FROM uploads WHERE Rand='$RandS'");
    $row=$query3->fetch_row();
    $IdU=$row[0];
    $Likes=$row[1];

    $Sel2=$con->query("SELECT id FROM likes WHERE User_id='$NameId' AND Post_id='$IdU'");
    $num_rows=$Sel2->num_rows;
    if ($num_rows>0) {
        echo $Likes;
    }else{
            $query=$con->query("INSERT INTO likes (Post_id,User_id,`DATE`) VALUES('$IdU','$NameId',NOW())");
            $query=$con->query("UPDATE uploads SET Likes=$Likes+1 WHERE Rand='$RandS'");
            echo $Likes+1;
    }
}

But it does not return anything untill i refresh the page

Answer 1

The this keyword inside the $.ajax methods callback is not the element, but the ajax call itself.

You have to either set context, or just store the outer this -value

$(".Likes").on('click', function() {
    var me = $(this);
    var i  = me.attr("data-i");

    $.ajax({
        type: "GET",
        url: '../connect.php',
        data: "I=" + i,
        success: function(data) {
            me.find(".L_c").html(data);
        }
   });
});