阿賈克斯（這個關鍵字）成功回調問題

Question

我在使用AJAX追加HTML煩惱動態生成的

##### in the code is where the main points are

• 我使用PHP作爲後端，和我很肯定沒問題，因爲我已經調試過了。這似乎與jQuery有關。它似乎不允許將html附加到ajax調用中，但允許在外部使用。

謝謝你的幫助，我真的很感激。請讓我知道是否有任何誤解，我會盡快澄清。

而且我有一個上點擊事件，將添加HTML的跨度

$(document).ready(function() { 

    // Sort default refresh 
    var selected_skill = $('#order').find(":selected").text(); 
    sortBySkill(selected_skill); ##### Creates the dynamic <span>'s ##### 


    $("#feed").on('click', '.post', showForm); ##### Problem lies within this code, where I am appending html to a <span> ##### 

}); 

這似乎是追加不會在Ajax調用工作，但工作在它之外。有誰知道爲什麼以及如何處理這個問題？

function showForm(){ 
    // Check if the user is logged in 
    var username = $('#username').val(); 
    var form_id = "form_comment_" + this.id; 
    var comment_span = "comment_span_" + this.id; 


    if ($("#" + form_id).length == 0) 
    { 
     //Displays all of the comments already made 
     $.ajax({ 
      type: "POST", 
      url: "ajax_calls.php", 
      data: {fpost_id:this.id, xswitch:"SFC"}, 
      dataType: "json", 
      error: function (qXHR, textStatus, errorThrown) { 
       console.log(errorThrown); 
      }, 
      success: function (result){ 
       // Display comments 
       console.log(result[0].username); 
       for (var i = 0; i < result.length; i++){ 
        var comments_html = result[i].username + " : " + result[i].comment + "<br>"; 
        $("#span_post_" + this.id).append(comments_html); // ##### This is not being appended ##### 
        $("#span_post_" + this.id).append("Why does this not append?"); 
       } 
      } 
     }); 
      $("#span_post_" + this.id).append("This appends fine"); // ##### THIS APPENDS FINE ##### 

    } else{ 
     $("#" + comment_span).remove(); // Remove the element if already exists 
    } 
    return false; 
} 

基本上我有一個排序技術生成動態範圍的（我想要的數據添加到使用AJAX）

function sortBySkill(selected_skill){ 
     $.ajax({ 
      type: "POST", 
      url: "ajax_calls.php", 
      data: {skill:selected_skill, xswitch:"SBS"}, 
      dataType:"json", 
      error: function (qXHR, textStatus, errorThrown) { 
       console.log(errorThrown); 
      }, 
      success: function (result) { 
       for (var i = 0; i < result.length; i++){ // ##### Dynamically generated span ##### 
        var str_post = "<span id='span_post_" + result[i].idPost + "'>" + 
        "<a href='' class='post' id='" + result[i].idPost + "'>" + 
        "Username:" + result[i].username + " | " + 
        "Steam: " + result[i].steam + " | " + 
        "Skill Level: " + result[i].skill + "<br>" + 
        "Post: " + result[i].description + "<br>" + 
        "Date: " + result[i].date + "<hr> </a> </span>"; 

        $("#feed").append(str_post); 
       } 
      } 
     }); 
} 

Answer 1

這的成功處理程序內表示jhxQR對象

您將需要保存此參考 a第二用它在Ajax回調

1日法

var self = this; 
    // Save the reference 
//Displays all of the comments already made 
     $.ajax({ ... 

       success : function() { 

        //use self here 

        $("#span_post_" + self.id).append(


       } 

第二個方法

一個更好的辦法是使用$.proxy向參考調用的對象綁定。

3 Appraoch

您還可以在context參數傳遞給阿賈克斯

dataType: "json", 
    context : this, // in the list of options 
    success : 

Answer 2

你可能想改變這些線沿着這些路線的東西...

假設你結果數據集包括一個ID ...（它可能是fpost_id雖然）

$("#span_post_" + result[i].id).append(comments_html); // ##### This is not being appended ##### 
    $("#span_post_" + result[i].id).append("Why does this not append?"); 

或之前宣佈它...

var id = this.id; 
$.ajax({ 
     type: "POST", 
     url: "ajax_calls.php", 
     data: {fpost_id:this.id, xswitch:"SFC"}, 
     dataType: "json", 
     error: function (qXHR, textStatus, errorThrown) { 
      console.log(errorThrown); 
     }, 
     success: function (result){ 
      // Display comments 
      console.log(result[0].username); 
      for (var i = 0; i < result.length; i++){ 
       var comments_html = result[i].username + " : " + result[i].comment + "<br>"; 
       $("#span_post_" + id).append(comments_html); // ##### This is not being appended ##### 
       $("#span_post_" + id).append("Why does this not append?"); 
      } 
     } 
    });