Question

When I add category in controller action I return JSON object:

return Json(new { categoryName = category.Name, isPrimary = isPrim ? "1" : "-1", categoryId = categoryId }, JsonRequestBehavior.AllowGet);

In JS handler function I add item on page:

...
var totalLink = "<li style='color: #bbbbbb;'>" + result.categoryName + "<a class='removeCategoryButton' href='#lnk#'>remove</a></li>";

                            var lnk = '@Url.Action("RemoveCategoryFromLocation", "Location", new{locationId = Model.Location.TicketId,  categoryId=-1})';

                            totalLink = totalLink.replace('#lnk#', lnk);
                            totalLink = totalLink.replace('-1', result.categoryId);

                            $('#otherCategories').append(totalLink);
...

When I click on remove link I call the following function:

$(function () {
            $('.removeCategoryButton').click(function (event) {
                event.preventDefault();
                $.ajax({
                    url: this.href,
                    type: 'POST',
                    context: this,
                    success: function (result) {
                        if(result.categoryName == 1) {
                            $(this).closest('li').remove();
                        }
                    }
                });
                return false;
            });
        });

But I get the following error:

This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.

This error happens only when I add item and want to remove it as soon after add on page. If I refresh page and click on remove link it works without problem.
Just to note when I get the error from above category is removed, so call works it just from some reason pop this error.

Answer 1

You seem to be adding the remove links dynamically and yet you have subscribed to the .click event handler only once when the DOM is ready. So make sure you do it in a lively manner. But since the .live() method is deprecated, depending on the jQuery version that you are using you should use either .delegate() or the .on() methods.

So with the latest version of jQuery it is recommended to use .on():

$(document).on(events, selector, data, handler);

$(document).on('click', '.removeCategoryButton', function () {
    $.ajax({
        url: this.href,
        type: 'POST',
        context: this,
        success: function (result) {
            if(result.categoryName == 1) {
                $(this).closest('li').remove();
            }
        }
    });
    return false;
});

Notice that you no longer need to wrap this in a document.ready callback.