title: Unable to manipulate DOM inside of AJAX success function
body: <p>I am wondering why I can't change the 'this' element on AJAX success. As you can see I am attempting to swap classes and additionally add a new data attribute to the anchor tag on ajax success and it just isn't working. If I move the code outside of the success function it works perfectly... I can see it updating live when inspecting the element (only when the code is outside of success)</p>
  
  <pre><code>&lt;a href="#" data-product-Id="@product.Id" class="lnkProduct"&gt;Add new product&lt;/a&gt;
  
  $(".lnkProduct").click(function (e) {
      e.preventDefault();
  
      var productId = $(this).attr('data-product-Id');
  
      $.ajax({
          type: "POST",
          url: "/Products/AddProduct",
          data: { productId: productId },
          dataType: "html",
          success: function (data) {
              $(this).addClass('lnkNewProduct').removeClass('lnkProduct');
              $(this).attr('data-newProduct-Id', data);
          }
      });
  });
  </code></pre>