jQuery的刷新的div基於HTML5數據元素

Question

我的代碼如下：

$('*[data-pickup]').change(function(){ 
    var value = $(this).val(); 
    console.log(value); 
    $.ajax({ 
     type : "POST", 
     cache : false, 
     url  : "a.php?pickup", 
     data : {'X': value}, 
     success: function(data) { 
     $("*[data-pick='" + $(this).attr("data-pickup") + "']").html("HELLO"); 
     } 
     }); 

    $("*[data-pick='" + $(this).attr("data-pickup") + "']").html("HELLO 2"); 
    $("*[data-pick='" + $(this).attr("data-pickup") + "']").show(); 
}) 

的AJAX調用示出了通過螢火蟲，這是不被在屏幕上刷新觀察時的響應，所以我改成一個簡單的「你好」的迴應，但仍然無法正常工作。

如果我註釋掉.html("HELLO 2")線，它顯示了包含data-pick=1或data-pick=2等HTML5的數據元素的一次隱藏DIV（這取決於attr("data-pickup")是），它自動填充「測試」，因此它顯示「測試」。

如果我取消對.html("HELLO 2")行的註釋，則顯示的div會顯示「HELLO 2」。但是，在註釋掉.html("HELLO 2")行的情況下，它應該通過AJAX調用從「Test」更新爲「Hello」，但事實並非如此。如果我將數據*更改爲簡單的HTML id元素並將所有代碼更新爲#" + $(this).attr("data-pickup") + "，則它與data屬性完全相同（AJAX調用不會更新任何內容）。

而當使一個稱爲「EL」 var和使其等於*[data-pick='" + $(this).attr("data-pickup") + "']，然後將其輸出到控制檯它顯示爲：「[數據挑選=‘1’]」或「 [DATA-如果我將$("*[data-pick='" + $(this).attr("data-pickup") + "']").whatever中的所有代碼更新爲$(el).whatever（認爲某處可能有錯誤），它仍然與以前一樣。

那麼，我做了什麼錯了？爲什麼div不會通過AJAX調用刷新，而是在AJAX調用之後呢？

Answer 1

的問題是，「這」在AJAX功能的成功處理程序是AJAX功能本身並不觸發該事件處理程序的元素。你需要做的是存儲元素var el = $(this)的值，然後引用每當你想利用閉包訪問元素時。

$('*[data-pickup]').change(function(){ 
     var value = $(this).val(); 
     var el = $(this); 
     console.log(value); 
     $.ajax({ 
      type : "POST", 
      cache : false, 
      url  : "a.php?pickup", 
      data : {'X': value}, 
      success: function(data) { 
      $("*[data-pick='" + el.attr("data-pickup") + "']").html("HELLO"); 
      } 
      }); 

     $("*[data-pick='" + el.attr("data-pickup") + "']").html("HELLO 2"); 
     $("*[data-pick='" + el.attr("data-pickup") + "']").show(); 
    }) 

Answer 2

試試這個：

$('*[data-pickup]').change(function() { 
    var self = this; 
    var value = $(self).val(); 
    console.log(value); 
    $.ajax({ 
     type : "POST", 
     cache : false, 
     url  : "a.php?pickup", 
     data : {'X': value}, 
     success: function(data) { 
     $("*[data-pick='" + $(self).attr("data-pickup") + "']").html("HELLO"); 
     } 
     }); 

    $("*[data-pick='" + $(self).attr("data-pickup") + "']").html("HELLO 2"); 
    $("*[data-pick='" + $(self).attr("data-pickup") + "']").show(); 
}) 

Answer 3

this成功函數內部是不是在改變處理程序的其他地方一樣this。

這裏有一個解決方案：

$('*[data-pickup]').change(function(){ 
    var value = $(this).val(); 
    var $el = $("*[data-pick='" + $(this).attr("data-pickup") + "']");//here keep a reference to the element(s) of interest. 
    console.log(value); 
    $.ajax({ 
     type: "POST", 
     cache: false, 
     url: "a.php?pickup", 
     data: {'X': value}, 
     success: function(data) { 
      $el.html("HELLO");//$el is still available here, from the closure formed by the outer function 
     } 
    }); 
    $el.show().html("HELLO 2"); 
});