1

我在使用 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);
                }
            } 
        });
}
4

2 回答 2

2

this inside the success handler represents the jhxQR object

You would need to save the reference of this and use it in the Ajax callback

1st Approach 

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

               success : function() {

                   //use self here 

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


               }

2nd Approach

A better approach it to use the $.proxy to to bind the reference to the invoked object.

3rd Appraoch

you can also pass the context parameter to Ajax

  dataType: "json",
    context : this, // in the list of options
    success :
于 2013-06-22T21:30:29.803 回答
0

您可能希望将这些行更改为沿这些行的内容...

假设您的结果数据集包含一个 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?");
            }
        }
    });
于 2013-06-22T21:33:54.297 回答