Cannot hide element on callback
Hi,
I am building a set of control buttons using ASP MVC3 and JQuery 1.5.1.
On my page I am showing a couple of images which I am attaching click events too in order to fire a post ajax request to retrieve a partial view from my controller.
I am them appending a new image to provide the accept changes functionality once the view data has been changed. When I do this I want the image button that has been clicked to hide so the user cannot press it again, however no matter what I try the button refuses to hide.
I have tried $(this).hide();, $(this).css('display', 'none'); but nothing appears to work.
My code is:
- // Edit an attribute
$('.edit_attribute').click(function () {
var aid = $(this).data('id');
var cid = $(this).data('cid');
var sl = $('.attribute_value[data-id=' + aid + ']');
var sc = $('.attribute_control[data-id=' + aid + ']');
$.post('ViewEditClientAttribute', { 'attrId': aid, 'clientId': cid }, function (data) {
$(sl).html(data);
}).success(function () {
$(sc).prepend('<img class="accept_attribute" src="/Content/images/accept-icon.png" alt="Accept" data-id="' + aid + '" data-cid="' + cid + '" />');
$(this).hide();
}).error(function () {
alert('Error');
});
});