無法操縱DOM內部的AJAX成功功能

我想知道爲什麼我無法在AJAX成功上更改'this'元素。正如你所看到的，我正在嘗試交換類，並另外向ajax成功上的錨標記添加一個新的數據屬性，但它不起作用。如果我移動代碼的成功函數它完美的外面......我可以看到它的更新現場檢查元素時（僅當代碼是成功的之外）無法操縱DOM內部的AJAX成功功能

<a href="#" data-product-Id="@product.Id" class="lnkProduct">Add new product</a> 

$(".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); 
     } 
    }); 
});

來源

2016-02-23 Blake Rivell

$(this)會給內部不同的上下文阿賈克斯成功function.Try這樣的： -

<a href="#" data-product-Id="@product.Id" class="lnkProduct">Add new product/a> 

$(".lnkProduct").click(function (e) { 
     e.preventDefault(); 
     var $this = $(this); //store $(this) reference in a variable 
     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'); //change here 
       $this.attr('data-newProduct-Id', data); //change here 
      } 
     }); 
});

來源

2016-02-23 04:19:49

'context：this，'也可以在ajax配置中使用.. – Rayon

這工作完美！我沒有意識到它在ajax成功函數中有不同的上下文。最後一個問題是：當我按照自己的方式交換課程時，非常奇怪的是，除非我單擊頁面上的空白區域，否則它不會完全執行樣式。你知道這可能是什麼原因嗎？我是否必須添加一個樣式：focus或者在我的site.css中？ –

@BlakeRivell ...以及我很高興這個答案適用於你...只要你的問題（上面提到）關心，而沒有看到你的造型和相關的HTML很難回答，但我認爲使用'.removeClass（）首先在'.addClass（）'前面，或者像上面提到的那樣在css中做一些改變。 –

$(this)給出了成功函數內部不同的上下文。所以在this的成功函數裏面使用class selector來操縱dom元素。

這樣

$(".lnkProduct").click(function (e) { 
e.preventDefault(); 

var productId = $(this).attr('data-product-Id'); 
var myanchor = $(this); 
$.ajax({ 
    type: "POST", 
    url: "/Products/AddProduct", 
    data: { productId: productId }, 
    dataType: "html", 
    success: function (data) { 
     myanchor.addClass('lnkNewProduct').removeClass('lnkProduct'); 
     myanchor.attr('data-newProduct-Id', data); 
    } 
}); 
});

來源

2016-02-23 04:20:28 shu

如果我這樣做不會使用.lnkProduct更新所有錨標籤嗎？我只想更新被點擊的那個。我認爲我應該將它存儲到點擊函數頂部的變量中嗎？ –

@BlakeRivell請檢查最新的答案 – shu

這是標準的JS行爲。 this的值根據調用方法而改變。

試着用這個。

$(".lnkProduct").click(function (e) { 
    e.preventDefault(); 

    var productId = $(this).attr('data-product-Id'); 
    var self = $(this); 
    $.ajax({ 
     type: "POST", 
     url: "/Products/AddProduct", 
     data: { productId: productId }, 
     dataType: "html", 
     success: function (data) { 
      self.addClass('lnkNewProduct').removeClass('lnkProduct'); 
      self.attr('data-newProduct-Id', data); 
     } 
    }); 
});

來源

2016-02-23 04:25:51 TeaCode

無法操縱DOM內部的AJAX成功功能

回答

相關問題