HTML數據更新時沒有ajax，但沒有ajax成功jQuery

Question

我的代碼正在更新HTML，如果沒有使用ajax而使用，但不能使用ajax成功。

我的HTML代碼

<button class="label label-primary likedream" dreamid="12">Like <span class="likecounter">0</span></button> 

這是我的jQuery代碼文件： -

jQuery(".likepost").click(function(){ 

    var likecounter = parseInt(jQuery(this).find(".likecounter").html()); 

    //jQuery(this).html('Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>'); 

    var dreampostId = jQuery(this).attr("dreamid"); 
    jQuery.post({url: "/hellotest", data: { "dreamId" : dreampostId, "action" : "like"}, success: function(result){ 
     var updatedres = 'Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>'; 
     jQuery(this).html(updatedres); 

     jQuery(this).removeClass("likepost"); 

     } 
    }); 

}); 

如果我取消我的註釋裏面的代碼行，然後就更新了我的HTML代碼，但不知道爲什麼相同的代碼不適用於Ajax成功。請幫忙。

謝謝！

Answer 1

好吧，這是我如何與代表團整理出來的。

jQuery('.dreamaction').on('click', '.likedream', function() { 

    var that = this; 
    jQuery(that).removeClass("likedream"); 

    var likecounter = parseInt(jQuery(that).find(".likecounter").html()); 

    var dreampostId = jQuery(this).attr("dreamid"); 

    jQuery.post({url: "/dreamaction", data: { "dreamId" : dreampostId, "action" : "like"}, success: function(result){ 

     var updatedres = 'Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>'; 

     jQuery(that).html(updatedres);   

     } 
    }); 

}）;

我的HTML代碼： -

<div class="dreamaction">     
        <button class="label label-primary likedream" dreamid="12">Like <span class="likecounter">0</span></button>   </div> 

Answer 2

問題是，您在另一個函數中，然後替換this變量。您需要將它保存在另一個變量中，以便它不會在函數中被覆蓋。

jQuery(".likepost").click(function(){ 

    var likecounter = parseInt(jQuery(this).find(".likecounter").html()); 

    //jQuery(this).html('Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>'); 
    var that = this; 
    var dreampostId = jQuery(this).attr("dreamid"); 
    jQuery.post({url: "/hellotest", data: { "dreamId" : dreampostId, "action" : "like"}, success: function(result){ 
     var updatedres = 'Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>'; 
     jQuery(that).html(updatedres); 

     jQuery(that).removeClass("likepost"); 

     } 
    }); 

}); 

---

Alternativly你可以使用不重寫這個變量箭頭功能。

Answer 3

在您的成功回調中this實際上是jqXhr對象，而不是被點擊的元素。在一個函數（最內層函數）this是依賴於如何調用或創建函數，也許還有其他的東西。
有辦法有this在你成功的回調是指單擊的項目

上下文參數設置爲項目（jQuery.ajax）

jQuery.post({url: "/hellotest", context: this, data: { "dreamId" : dreampostId, "action" : "like"}, success: function(result){ 
    var updatedres = 'Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>'; 
    jQuery(this).html(updatedres); 

    jQuery(this).removeClass("likepost"); 

    } 
}); 

使用箭頭功能（ES6）

jQuery.post({url: "/hellotest", context: this, data: { "dreamId" : dreampostId, "action" : "like"}, success: result => { 
    var updatedres = 'Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>'; 
    jQuery(this).html(updatedres); 

    jQuery(this).removeClass("likepost"); 

    } 
});