Question

我在使用ajax将HTML附加到动态生成的

时遇到了麻烦

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

我使用php作为后端，我很确定它很好，因为我已经调试过了。好像它与jquery有关。它似乎不允许在ajax调用中附加html，但允许在外部。

感谢您的帮助，我真的很感激。如果有任何误解，请告诉我，我会尽快澄清。

我有一个点击事件，会将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对象

您需要保存 this 的引用并在Ajax回调中使用它

第一种方法

 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绑定对被调用对象的引用的更好方法。

第三Appraoch

您也可以将context参数传递给Ajax

  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?");
            }
        }
    });

Ajax（此关键字）成功回调问题

2 个答案: