jQuery Ajax request doesn't return data

I have a group of button, I want click each one, send data to a processing page, then return data to the self html and change class click to more.

In any case, my code have no reture data. I have checked in chrome - network, I can see the ajax process success, even add an alert in success: function, I also can get it. Where am I wrong?

index.php

$(document).ready(function(){
    $(".click").live('click',function() {
        $.ajax({
            type: "POST",
            url: "add.php",
            data: "add=ccc",
          开发者_高级运维  dataType: "html",
            success: function(data){ 
                //alert('success');
                $(this).html(data).addClass('more').removeClass('click');
            }
        });
    });
});

<a class="click">bbb</a>

add.php

<?php echo $_POST['add']; ?>

this doesn't point to the link inside the success function.

Add var self = this; before the $.ajax call and use self instead of this inside the callback.

Another option would be using context: this in the $.ajax options.